/* KFFART V8.0 — Tech Sharing: immersive office scene and About Me's visual typography.
   The project data below remains KFFART's existing three documented project categories. */
#detail-view.tech-view{padding:0!important;margin:0!important;min-height:100svh;background:#101d21!important;color:#f6f2e8;overflow:clip;}
body:has(#detail-view.tech-view:not([hidden])) #topbar,
body:has(#detail-view.tech-view:not([hidden])) #mobile-menu,
body:has(#detail-view.tech-view:not([hidden])) .bottom-nav,
body:has(#detail-view.tech-view:not([hidden])) .footer{display:none!important;}
.tech-scene,.tech-flight-interior{
 background-image:
 linear-gradient(90deg,rgba(7,17,23,.96) 0%,rgba(8,20,27,.9) 20%,rgba(10,21,27,.65) 38%,rgba(10,20,24,.14) 67%,rgba(8,19,26,.04) 100%),
 linear-gradient(0deg,rgba(6,15,19,.64),transparent 24%,transparent 84%,rgba(8,14,24,.18)),
 url("tech-studio-1672.webp");
 background-size:cover;background-position:center center;background-repeat:no-repeat;
}
.tech-scene{position:relative;isolation:isolate;min-height:720px;width:100%;height:100svh;overflow:hidden;border-bottom:1px solid #debb8566;}
.tech-scene::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(4,13,18,.48),transparent 14%,transparent 88%,rgba(4,11,16,.12));}
.tech-hero{
 position:absolute;top:clamp(13px,2.1vw,30px);left:clamp(10px,1.5vw,25px);z-index:15;
 width:min(520px,34%);color:#f6f2e8;text-shadow:0 2px 20px #05151e99;
 pointer-events:none;
}
.tech-eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;color:#e4c8a2;letter-spacing:.22em;font-weight:700;}
.tech-eyebrow::before{content:"";width:26px;height:1px;background:#d9a96a;box-shadow:0 0 7px #eeac64;}
.tech-hero h1{
 color:#faf4e8;font-size:clamp(60px,6.7vw,118px);font-weight:800;
 letter-spacing:-.066em;line-height:1.18;margin:24px 0 10px;white-space:nowrap;
}
.tech-hero h1 span{display:block;font-size:clamp(34px,4.05vw,67px);font-weight:700;
 color:#f2c998;letter-spacing:-.075em;line-height:1.36;margin-top:5px;white-space:normal;}
.tech-lead{font-size:clamp(16px,1.35vw,21px);line-height:1.76;color:#f3e6d6;font-weight:500;
 margin:19px 0 17px;max-width:450px;}
.tech-intro{font-size:clamp(11px,.87vw,14px);line-height:2.05;color:#c4cad0;max-width:450px;margin:0;}
.tech-hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:24px;}
.tech-primary,.tech-secondary{
 appearance:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
 min-height:44px;border-radius:100px;padding:13px 20px;font-size:13px;font-weight:700;letter-spacing:.015em;
 transition:transform .16s,background .16s,border-color .16s;pointer-events:auto;
}
.tech-primary{border:1px solid #eebd7c;color:#0d1a20;background:linear-gradient(110deg,#f2d4a3,#f3a970);box-shadow:0 8px 22px #dc8d4345;}
.tech-secondary{border:1px solid #e2d1b863;background:rgba(16,33,39,.7);color:#f5dfc2;}
.tech-primary:hover,.tech-secondary:hover{transform:translateY(-2px);}
.tech-primary:focus-visible,.tech-secondary:focus-visible,.tech-point:focus-visible,.tech-note-next:focus-visible,.tech-note-go:focus-visible{outline:2px solid #fee3ac;outline-offset:4px;}
.tech-spots{position:absolute;inset:0;z-index:8;pointer-events:none;}
.tech-point{position:absolute;display:flex;justify-content:center;align-items:center;transform:translate(-50%,-50%);
 width:48px;height:48px;background:transparent;border:0;cursor:pointer;pointer-events:auto;color:#f6f9ff;}
.tech-point .tech-star{font-size:26px;color:rgba(255,255,255,.84);line-height:1;
 text-shadow:0 0 10px rgba(255,255,255,.76),0 0 23px rgba(229,222,176,.53);
 animation:tech-twinkle 2.8s ease-in-out infinite;}
.tech-point:nth-child(2) .tech-star{animation-delay:-.8s;}
.tech-point:nth-child(3) .tech-star{animation-delay:-1.5s;}
.tech-point:hover .tech-star,.tech-point[aria-expanded="true"] .tech-star{color:#fff;filter:drop-shadow(0 0 12px #fff5d4);}
.tech-point .tech-point-title{display:none;}
@keyframes tech-twinkle{0%,100%{opacity:.48;transform:scale(.84)}50%{opacity:1;transform:scale(1.17)}}
.tech-caption[hidden]{display:none!important;}
.tech-caption{
 position:absolute;right:clamp(24px,5vw,90px);bottom:clamp(75px,10vh,128px);z-index:13;
 width:min(340px,30vw);padding:18px 20px;border-radius:14px;
 background:linear-gradient(142deg,rgba(10,29,41,.82),rgba(18,41,56,.68));
 border:1px solid rgba(238,247,255,.39);box-shadow:0 9px 26px rgba(0,15,25,.34),inset 0 1px rgba(255,255,255,.12);
 backdrop-filter:blur(16px) saturate(125%);
 animation:tech-note-in .25s ease-out both;
}
@keyframes tech-note-in{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
.tech-caption-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.tech-caption-kicker{color:#f4d1a2;letter-spacing:.19em;font-size:10px;}
.tech-caption-close{background:#ffffff15;border:0;border-radius:50%;width:29px;height:29px;color:#fff;font-size:20px;cursor:pointer;}
.tech-caption h2{font-size:20px;line-height:1.35;color:#f7e7d3;margin:11px 0;}
.tech-caption p{font-size:12px;line-height:1.85;color:#d4e1df;margin:0 0 15px;}
.tech-caption-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.tech-note-next,.tech-note-go{border:0;border-bottom:1px solid #e9c392;background:none;color:#f7dab8;font-size:12px;padding:4px 0 7px;cursor:pointer;}
.tech-side-note{position:absolute;left:clamp(30px,5.7vw,118px);bottom:30px;z-index:4;color:#ddc4a4a8;font-size:10px;letter-spacing:.22em;text-shadow:0 2px 8px #101417;}
.tech-side-note::before{content:"✦";margin-right:10px;color:#ebb680;}
.tech-arriving .tech-hero,.tech-arriving .tech-spots,.tech-arriving .tech-side-note{opacity:0;}
.tech-view .tech-hero,.tech-view .tech-spots,.tech-view .tech-side-note{transition:opacity .4s ease;}
.tech-notebook{position:relative;background:#101d21;color:#efece6;padding:112px clamp(25px,7vw,135px) 100px;isolation:isolate;}
.tech-notebook::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
 background:radial-gradient(ellipse at 90% 14%,#8c6a3430,transparent 45%),linear-gradient(90deg,transparent 50%,#bad8c408 50%,transparent 50.1%);}
.tech-notebook-inner{max-width:1200px;margin:0 auto;}
.tech-notebook-header{display:grid;grid-template-columns:1fr 1.5fr;gap:65px;padding-bottom:65px;border-bottom:1px solid #d4bf9f35;}
.tech-notebook-kicker{font-size:12px;letter-spacing:.22em;color:#d6aa79;}
.tech-notebook-header h2{font-size:clamp(44px,5.6vw,88px);line-height:1.2;letter-spacing:-.06em;margin:8px 0;}
.tech-notebook-header p{max-width:620px;margin:0;font-size:16px;color:#c7c9c5;line-height:2;align-self:center;}
.tech-row{display:grid;grid-template-columns:minmax(160px,.55fr) 1fr;gap:55px;padding:47px 0;border-bottom:1px solid #d6b78b32;scroll-margin-top:24px;}
.tech-row-id{font:600 12px ui-monospace,SFMono-Regular,monospace;color:#ddae76;letter-spacing:.15em;}
.tech-row h3{font-size:clamp(25px,3.2vw,39px);margin:8px 0 14px;letter-spacing:-.04em;}
.tech-row p{max-width:690px;font-size:15px;line-height:2.05;color:#c1c8c5;margin:0;}
.tech-row-status{display:inline-block;font-size:11px;color:#dec8a9;border-bottom:1px solid #dec8a95c;margin-top:12px;padding-bottom:6px;}
.tech-end{display:flex;align-items:center;justify-content:space-between;gap:25px;flex-wrap:wrap;margin-top:60px;color:#a5b7b2;font-size:11px;letter-spacing:.07em;}
.tech-end a{color:#f1d3b4;text-decoration:none;}
.tech-flight[hidden]{display:none!important;}
.tech-flight{z-index:111!important;}
.tech-flight .journey-flight-void{background:radial-gradient(circle at var(--jx,50%) var(--jy,50%),#7f5d4c,#1c2730 56%,#0b1921);}
.tech-flight .journey-flight-sphere{filter:drop-shadow(0 0 28px #f2c38db0);}
.tech-flight .journey-flight-hud{color:#ffe0b5;text-shadow:0 0 14px #eeb473;}
.tech-flight-interior{position:absolute;inset:0;z-index:4;opacity:0;transform:scale(1.12);will-change:opacity,transform;}
.tech-flight.is-flying .tech-flight-interior{animation:journey-enter-lab 1570ms cubic-bezier(.2,.72,.28,1) both;}
@media(min-width:731px) and (max-width:1120px){
 .tech-hero{width:min(490px,43%);}
 .tech-hero h1{font-size:clamp(57px,5.9vw,78px);}
 .tech-hero h1 span{font-size:clamp(32px,4.05vw,49px);}
 .tech-caption{width:min(315px,36vw);}
}
@media(max-width:730px){
 .tech-scene{height:100svh;min-height:780px;}
 .tech-scene,.tech-flight-interior{background-position:53% center;
  background-image:linear-gradient(180deg,rgba(5,15,22,.94) 0%,rgba(6,17,24,.9) 21%,rgba(9,20,24,.55) 39%,rgba(6,16,20,.04) 68%,rgba(7,16,22,.55) 100%),url("tech-studio-1672.webp");}
 .tech-hero{top:12px;left:12px;right:12px;width:auto;max-width:none;}
 .tech-hero h1{font-size:clamp(52px,12vw,72px);line-height:1.13;margin:12px 0 4px;}
 .tech-hero h1 span{font-size:clamp(30px,7vw,43px);line-height:1.24;margin:5px 0 0;}
 .tech-lead{font-size:15px;line-height:1.66;margin:11px 0 12px;max-width:370px;}
 .tech-intro{max-width:325px;font-size:11px;line-height:1.77;}
 .tech-hero-actions{margin-top:18px;gap:9px;}
 .tech-primary,.tech-secondary{min-height:39px;font-size:12px;padding:10px 13px;}
 .tech-point{
  top:auto!important;bottom:76px!important;left:auto;
  transform:none!important;width:calc((100vw - 51px)/3);height:44px;
  border:1px solid rgba(244,225,190,.53);border-radius:25px;
  background:rgba(10,30,37,.76);box-shadow:0 4px 14px #0c1b25aa;
  backdrop-filter:blur(9px);gap:5px;
 }
 .tech-point:nth-child(1){left:14px!important;}
 .tech-point:nth-child(2){left:calc(50% - (100vw - 51px)/6)!important;}
 .tech-point:nth-child(3){right:14px!important;left:auto!important;}
 .tech-point .tech-star{font-size:16px;animation:none!important;}
 .tech-point .tech-point-title{display:inline-block;font-size:11px;color:#f7e8ce;white-space:nowrap;font-weight:700;}
 .tech-caption{left:14px;right:14px;bottom:134px;width:auto;max-height:29vh;overflow-y:auto;padding:13px 17px;}
 .tech-caption h2{font-size:17px;margin:6px 0;}
 .tech-caption p{font-size:11px;line-height:1.7;margin-bottom:8px;}
 .tech-side-note{left:15px;bottom:25px;right:15px;font-size:8px;letter-spacing:.055em;}
 .tech-notebook{padding:68px 24px 85px;}
 .tech-notebook-header{display:block;padding-bottom:38px;}
 .tech-notebook-header p{font-size:13px;margin-top:20px;}
 .tech-row{grid-template-columns:1fr;gap:12px;padding:31px 0;}
 .tech-row h3{font-size:27px;}
 .tech-row p{font-size:13px;}
 .tech-end{padding-bottom:40px;}
}
@media(max-width:355px){
 .tech-scene{min-height:735px;}
 .tech-hero h1{font-size:47px;}
 .tech-point{width:calc((100vw - 42px)/3);}
 .tech-point:nth-child(1){left:9px!important;}
 .tech-point:nth-child(2){left:calc(50% - (100vw - 42px)/6)!important;}
 .tech-point:nth-child(3){right:9px!important;}
 .tech-point .tech-point-title{font-size:10px;}
}
@media(prefers-reduced-motion:reduce){
 .tech-point .tech-star,.tech-flight.is-flying .tech-flight-interior{animation:none!important;}
 .tech-primary,.tech-secondary,.tech-view .tech-hero,.tech-view .tech-spots,.tech-view .tech-side-note{transition:none!important;}
}
body.journey-motion-paused .tech-point .tech-star{animation-play-state:paused!important;}


/* Tech Sharing refinement: the main fabrication machine remains central-right.
   Typography inherits the proven About Me layout with a narrower English title. */
.tech-hero{width:min(630px,43%)!important;}
.tech-hero h1{font-size:clamp(54px,4.85vw,88px)!important;letter-spacing:-.065em!important;}
.tech-hero h1 span{font-size:clamp(34px,4.05vw,67px)!important;}
.tech-scene,.tech-flight-interior{
 background-image:linear-gradient(90deg,rgba(6,17,24,.92) 0%,rgba(7,18,26,.83) 21%,rgba(9,22,29,.52) 38%,rgba(10,24,30,.07) 66%,transparent 100%),
 linear-gradient(0deg,rgba(6,15,19,.57),transparent 22%,transparent 89%,rgba(8,14,24,.15)),
 url("tech-studio-1672.webp");
}
@media(min-width:731px) and (max-width:1120px){
 .tech-hero{width:min(530px,51%)!important;}
 .tech-hero h1{font-size:clamp(45px,5.2vw,68px)!important;}
}
@media(max-width:730px){
 .tech-hero{width:auto!important;}
 .tech-hero h1{font-size:clamp(44px,10.8vw,60px)!important;}
 .tech-hero h1 span{font-size:clamp(30px,7vw,43px)!important;}
 .tech-scene,.tech-flight-interior{
   background-position:53% center!important;
   background-image:linear-gradient(180deg,rgba(5,15,22,.95) 0%,rgba(6,17,24,.85) 24%,rgba(7,18,24,.5) 39%,rgba(6,16,20,.04) 70%,rgba(7,16,22,.55) 100%),
   url("tech-studio-1672.webp");
 }
}