/* Night-shift scene outside; monochrome phosphor terminal inside. */
:root{--paper:#050609;--ink:#d7e5e8;--red:#62ebfa;--line:#202833;--phosphor:#9cec9c;--phosphor-muted:#75ae7c;--terminal:#06100b;--terminal-line:#294e32}
body{background:#050609}.site-header{border-color:#20232c}.wordmark{color:#e0eeee}.wordmark span{color:#ef67d4}.header-note{color:#6a8090}.header-contact{color:#77dae9;border-color:#356575}.studio-heading{top:8%;max-width:420px}.studio-heading .eyebrow{color:#f078ce;font-size:9px;letter-spacing:2px}.studio-heading h1{font-family:var(--mono);font-size:clamp(34px,3.8vw,56px);line-height:1.15;letter-spacing:-2.5px;font-weight:500;color:#dae5eb}.studio-heading h1 em{font-style:normal;color:#61e9ed;text-shadow:0 0 26px #1ac7ef38}.thai-intro{color:#798b99}.edition,.desk-coordinate{color:#708592}.enter-button{color:#91efff;background:#0a202b;border:1px solid #34cee4;box-shadow:0 0 25px #15bcda22,inset 0 0 15px #1ac1df0d;font-family:var(--body);border-radius:0}.enter-button:hover{background:#133646;box-shadow:0 0 30px #18bed340}.enter-group>span{color:#6e929c}.site-footer{border-color:#20232c;color:#788995}.site-footer i{background:#88ed9d;box-shadow:0 0 8px #42ff93}.site-footer button{color:#a1c7ca}.scene-fallback{filter:drop-shadow(-25px 10px 35px #cb26c944) drop-shadow(30px 5px 40px #00cae950)}.fallback-monitor{background:#04180b;border-color:#5c6670;outline-color:#303746;box-shadow:18px 24px 0 #242935,25px 38px 60px #04cdd722;color:#99f7a4}.fallback-monitor strong{font:28px var(--mono);text-shadow:0 0 12px #49df68}.fallback-monitor strong span{color:#91ff9b}.fallback-stand{background:#3f4654}.fallback-keyboard{background:repeating-linear-gradient(90deg,#59616d 0 15px,#30363f 16px 18px);box-shadow:0 10px 0 #242b37}
.desktop,.js.os-open .desktop{background:radial-gradient(ellipse at 50% 40%,#102919 0,#06110c 60%,#020705 100%);color:var(--phosphor);font-family:var(--mono),var(--body);text-shadow:0 0 8px #7cff7c18}.desktop::after{content:'';position:fixed;inset:0;z-index:40;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,#00000014 3px 4px);box-shadow:inset 0 0 130px #0009}.os-topbar{background:#07130c;border-color:var(--terminal-line);color:var(--phosphor);height:48px}.os-brand small,.os-caption{color:#6ca577}.os-topbar>button{color:#a0dca5}.desktop-icon{color:#91c991;font-family:var(--mono);font-size:9px}.desktop-icon:hover,.desktop-icon[aria-current=page]{background:#98ed9920;border:1px solid #6cbd7080;color:#c0ffb2;border-radius:0}.pixel-icon{color:#a4ed99!important;text-shadow:0 0 12px #72ff6860;font:20px/36px var(--mono);filter:none;border:1px solid #4b7b49;width:43px;height:36px}.pixel-icon::before{content:'[';color:#608260}.pixel-icon::after{content:']';color:#608260}.js.os-open .desktop-watermark{font:clamp(36px,6vw,90px)/1.2 var(--mono);letter-spacing:-4px;color:#6daf7212;right:4%;top:32%}.desktop-watermark em{font-style:normal}.desktop-watermark small{color:#6f9c682a}.os-window{background:#07140c;border:1px solid #497b49;box-shadow:0 0 0 5px #030a06,0 0 70px #4ddb5b0d}.window-titlebar{background:#1b3b22;color:#b7f7ab;border-color:#497b49;font-size:10px}.window-dot{background:#98ee87;border-color:#9fec8b;box-shadow:0 0 8px #83ef7850}.window-actions button{background:#0c1f10;color:#8cc58b;border-color:#568252;box-shadow:none}.window-actions button:hover{color:#031008;background:#9fec8b}.window-toolbar{background:#08190d;border-color:#25432a;color:#78b47b}.window-toolbar>span:last-child{color:#a0ec95}.window-status{background:#08190d;border-color:#29462e;color:#78a978}.portfolio-section h2,.portfolio-section h3{color:#a4e49a}.portfolio-section h2>span{color:#79b581}.portfolio-section p{color:#8fb998}.portfolio-section .eyebrow{color:#88d991}.panel-index{color:#5f986d}.welcome h2{font:clamp(32px,4.5vw,62px)/1.2 var(--mono);letter-spacing:-3px;color:#b9f8a2;text-shadow:0 0 18px #84ff7650}.welcome h2>span{color:#b9f8a2}.terminal-cursor{animation:cursor-blink 1.1s steps(1,end) infinite}.welcome .welcome-role{color:#81ba86}.welcome-rule{background:#315639}.welcome h3{font-family:var(--body)}.welcome-foot{color:#608b68}.text-link{color:#a5d895}.btn-accent{background:#102b16;border-color:#6fb675;box-shadow:none;color:#b1e5a8}.btn-accent:hover{color:#07160c;background:#a5db99}.garden-content-block,.skill-branch,.service-card,.faq-item{background:#0b1e11;border-color:#294b31}.project-card{background:#0c1e11;border-color:#31543a}.project-card summary:hover{background:#173721}.project-meta,.project-open{color:#83bf85}.project-title{color:#a6d79c}.project-detail{border-color:#31543a}.tech-list li{background:#14311a;border-color:#31553a;color:#9ccd98}.skill-node{color:#8ab380}.service-price{color:#b2e597!important}.service-features,.faq-item dd{color:#8bb591}.faq-item dt{color:#a3d79b}.contact-links a{border-color:#31523b;color:#a4d9a1}.contact-links small{color:#75a87d}.form-group label{color:#8abd8c}.form-group input,.form-group textarea{color:#b4e2ac;background:#041009;border-color:#456e49;caret-color:#b3ff9b}.form-group input::placeholder,.form-group textarea::placeholder{color:#608b69}.about-portrait{filter:grayscale(1) sepia(.7) hue-rotate(65deg);border-color:#315b37}.taskbar{background:#09170e;border-color:#29432c;color:#97c98d}.taskbar button,.start-button{background:#0d2112;border-color:#456849;color:#a6d59d;box-shadow:none}.taskbar time{border-color:#31543a}.taskbar-right button{color:#89b781}.terminal-command{display:flex;gap:10px;padding:12px 16px;border-top:1px solid #2b4e32;align-items:center;flex-shrink:0;background:#061009;font:11px var(--mono);color:#a3e595}.terminal-command input{width:100%;min-width:0;background:none;color:#aeefa0;border:0;outline-offset:2px;font:12px var(--mono);caret-color:#b8ffa5}.terminal-command label{white-space:nowrap}.terminal-command button{border:1px solid #325638;background:#0f2815;color:#a8e29b;padding:3px 9px}.command-output{margin:0;padding:0 16px;background:#061009;color:#9bcc94;font:10px/1.8 var(--mono);flex-shrink:0;max-height:90px;overflow:auto}.command-output:not(:empty){padding-bottom:12px}#portfolio-content{scrollbar-color:#3f6c46 #08180d!important}.reading .portfolio-section+.portfolio-section{border-color:#294a31!important}.desktop :focus-visible{outline-color:#a9ec92}.desktop .portfolio-section{font-family:var(--mono),var(--body)}.desktop .portfolio-section p,.desktop .portfolio-section h3,.desktop .project-title,.desktop .contact-form,.desktop .service-features,.desktop .faq-list{font-family:var(--body)}.no-js .terminal-command{display:none}
@keyframes cursor-blink{50%{opacity:0}}
@media(max-width:1000px){.studio-heading h1{font-size:39px}}
@media(max-width:640px){.studio-heading h1{font-size:35px;letter-spacing:-1.8px}.studio-heading .eyebrow{font-size:7px;letter-spacing:1.4px}.studio-heading{top:4%}.thai-intro{font-size:11px}.welcome h2{font-size:33px;letter-spacing:-2px}.terminal-command{font-size:9px;padding:10px;gap:6px}.terminal-command input{font-size:11px}.os-brand small{font-size:8px;margin-left:2px}.os-topbar>button{font-size:9px}.desktop-icon{font-size:8px}.pixel-icon{height:32px;line-height:30px;font-size:16px}.taskbar button,.start-button{font-size:8px}.desktop::after{box-shadow:inset 0 0 50px #0005}}
/* Seated view: the HTML terminal occupies the projected physical CRT glass. */
.monitor-controls{display:none}.monitor-view .site-header,.monitor-view .site-footer,.monitor-view .studio-heading,.monitor-view .studio-caption{visibility:hidden}.monitor-view .studio{position:fixed;inset:0;height:100svh;min-height:0;max-height:none;z-index:1}.monitor-view .scene-wrap{inset:0}.js.os-open.monitor-view .desktop{position:fixed;inset:auto;left:var(--screen-left,25vw);top:var(--screen-top,25vh);width:var(--screen-width,50vw);height:var(--screen-height,50vh);min-height:0;overflow:hidden;border-radius:5% / 7%;z-index:30;background:#051109;box-shadow:inset 0 0 24px #000b,0 0 18px #7df49218;display:flex;flex-direction:column;padding:10px 12px 8px}.monitor-view .desktop::after{position:absolute;box-shadow:inset 0 0 24px #0007;border-radius:inherit}.monitor-view .os-topbar{position:relative!important;inset:auto!important;height:27px;min-height:27px;padding:0 8px;font-size:9px;gap:8px}.monitor-view .os-caption,.monitor-view .os-topbar>button,.monitor-view .os-brand small{display:none}.monitor-view .desktop-icons{position:relative!important;inset:auto!important;height:43px;min-height:43px;flex-direction:row!important;flex-wrap:nowrap!important;gap:3px;padding:4px 0;margin:0;overflow-x:auto;scrollbar-width:thin;align-items:stretch}.monitor-view .desktop-icon{width:auto!important;min-width:0;flex:1;padding:4px 3px;gap:0;justify-content:center;font-size:8px;white-space:nowrap}.monitor-view .pixel-icon{display:none}.monitor-view .os-window,.monitor-view .os-window.maximized{position:relative!important;inset:auto!important;transform:none!important;width:100%!important;height:auto!important;flex:1;min-height:0;margin:0;box-shadow:none;border-color:#24422b}.monitor-view .window-titlebar{height:23px;min-height:23px;padding:2px 8px;font-size:8px;cursor:default}.monitor-view .window-actions{display:none}.monitor-view .window-toolbar{padding:5px 9px;font-size:8px}.monitor-view .portfolio-section{padding:17px 22px}.monitor-view .portfolio-section h2{font-size:23px;margin:12px 0}.monitor-view .welcome h2{font-size:36px;letter-spacing:-2px}.monitor-view .welcome h3{font-size:16px}.monitor-view .portfolio-section p{font-size:11px;line-height:1.8}.monitor-view .welcome .welcome-role{font-size:9px}.monitor-view .welcome-rule{margin:16px 0}.monitor-view .welcome-actions{margin-top:15px;gap:14px}.monitor-view .btn,.monitor-view .text-link{font-size:10px;padding:8px 12px}.monitor-view .welcome-foot{margin-top:20px;font-size:7px}.monitor-view .panel-heading .eyebrow{font-size:8px;letter-spacing:1px}.monitor-view .terminal-command{padding:6px 9px;font-size:9px;gap:6px}.monitor-view .terminal-command input{font-size:10px}.monitor-view .command-output{font-size:8px;max-height:48px;padding-left:9px;padding-right:9px}.monitor-view .window-status{padding:4px 8px;font-size:7px}.monitor-view .taskbar{position:relative;inset:auto;height:24px;min-height:24px;padding:3px 0;gap:5px;border-top-width:1px}.monitor-view .taskbar button,.monitor-view .start-button{font-size:7px;padding:3px 6px}.monitor-view .taskbar time{font-size:8px}.monitor-view .desktop-watermark{display:none!important}.monitor-view .monitor-controls{display:flex;position:fixed;z-index:31;bottom:22px;left:50%;transform:translateX(-50%);align-items:center;flex-direction:column;gap:10px;white-space:nowrap}.monitor-controls>span{font:8px var(--mono);letter-spacing:2px;color:#719b9e}.monitor-controls>div{display:flex;gap:10px}.monitor-controls button{background:#061118dc;border:1px solid #37616c;color:#aedce1;padding:9px 16px;font-size:11px}.monitor-controls button:hover{border-color:#75deed;background:#102930}.monitor-controls small{font-size:9px;color:#778d97}
@media(max-width:640px){.monitor-view .desktop{padding:5px 6px!important}.monitor-view .desktop-icons{height:31px;min-height:31px}.monitor-view .desktop-icon{flex:none;min-width:48px;padding:3px;font-size:7px}.monitor-view .os-topbar{height:20px;min-height:20px;font-size:8px}.monitor-view .window-titlebar,.monitor-view .window-toolbar,.monitor-view .window-status,.monitor-view .taskbar{display:none}.monitor-view .portfolio-section{padding:12px}.monitor-view .welcome h2{font-size:24px}.monitor-view .welcome .welcome-role{font-size:8px}.monitor-view .portfolio-section h3{font-size:13px}.monitor-view .portfolio-section p{font-size:10px}.monitor-view .welcome-actions{margin-top:10px;gap:4px}.monitor-view .welcome-rule{margin:10px 0}.monitor-view .terminal-command{padding:4px 6px;font-size:8px}.monitor-view .terminal-command input{font-size:9px}.monitor-view .monitor-controls{bottom:28px}.monitor-view .command-output:not(:empty){padding-bottom:4px}.monitor-view .contact-links{grid-template-columns:1fr}}
.js.os-open.monitor-view .desktop{left:0;top:0;transform-origin:0 0;transform:var(--screen-transform,none)}
.portfolio-section h1:focus,.portfolio-section h2:focus{outline:none}
/* A stable render surface prevents a resize/camera jump during approach. */
.scene-wrap{position:fixed;inset:0;z-index:0;pointer-events:auto}
.site-header,.site-footer{position:relative;z-index:2}
.studio-heading,.studio-caption{transition:opacity .35s ease}
.approaching-monitor .studio-heading,.approaching-monitor .studio-caption{opacity:0;pointer-events:none}
.approaching-monitor .enter-group{pointer-events:none}
.monitor-view .desktop{animation:terminal-reveal .38s ease both}
@keyframes terminal-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.monitor-view .desktop{animation:none}.studio-heading,.studio-caption{transition:none}}
/* Mobile CRT is a miniature desktop preview; reading mode stays full size. */
@media(max-width:640px){
 .monitor-view .desktop{padding:10px 12px 8px!important;pointer-events:none}
 .monitor-view .os-topbar{height:27px;min-height:27px;font-size:9px}
 .monitor-view .desktop-icons{height:43px;min-height:43px;overflow:hidden}
 .monitor-view .desktop-icon{flex:1;min-width:0;font-size:8px;padding:4px 3px}
 .monitor-view .window-titlebar{display:flex;height:23px;min-height:23px}
 .monitor-view .window-toolbar,.monitor-view .window-status,.monitor-view .taskbar{display:flex}
 .monitor-view .portfolio-section{padding:22px 28px}
 .monitor-view .welcome h2{font-size:44px}
 .monitor-view .welcome .welcome-role{font-size:11px}
 .monitor-view .portfolio-section h3{font-size:17px}
 .monitor-view .portfolio-section p{font-size:13px}
 .monitor-view .welcome-actions{flex-direction:row;align-items:center;gap:18px;margin-top:20px}
 .monitor-view .welcome-rule{margin:20px 0}
 .monitor-view .strength-grid,.monitor-view .care-grid,.monitor-view .contact-links,.monitor-view .contact-form{grid-template-columns:1fr 1fr}
 .monitor-view .profile-introduction{flex-direction:row}
 .monitor-view .terminal-command{padding:8px 12px;font-size:10px}
 .monitor-view .terminal-command input{font-size:11px}
 .monitor-view .monitor-controls button:first-child{background:#12343e;border-color:#67dce9;color:#d4faff;font-size:14px;padding:13px 23px;box-shadow:0 0 20px #24d1e422}
 .monitor-view .monitor-controls small{font-size:10px}
}
#mobile-reader{padding:0;border:0;background:transparent;color:var(--phosphor);width:100%;max-width:none;height:100%;max-height:none;overflow:hidden}
#mobile-reader::backdrop{background:#010705a6;backdrop-filter:blur(4px)}
#close-reader{position:absolute;right:16px;top:max(16px,env(safe-area-inset-top));z-index:50;padding:10px 16px;color:#c4efb8;background:#122a19;border:1px solid #5a9963;font-size:13px}
.reader-overlay .studio{position:fixed;inset:0;height:100svh;min-height:0;max-height:none;z-index:1}
.reader-overlay .site-header,.reader-overlay .site-footer,.reader-overlay .studio-heading,.reader-overlay .studio-caption{visibility:hidden}
.js.os-open.reader-overlay .desktop{position:absolute;inset:70px 10px 24px;min-height:0;transform:none!important;width:auto;height:auto;border:1px solid #477a50;border-radius:12px;overflow:hidden;background:#06110cf5;animation:reader-in .28s ease both}
.reader-overlay .desktop::after{position:absolute;box-shadow:inset 0 0 35px #0003}
.reader-overlay .os-topbar{height:40px;padding:0 12px}
.reader-overlay .os-topbar>button,.reader-overlay .os-caption{display:none}
.js.os-open.reader-overlay .desktop-icons{top:46px;left:6px;right:6px;height:65px;bottom:auto;flex-direction:row;flex-wrap:nowrap;overflow-x:auto}
.js.os-open.reader-overlay .os-window{inset:116px 7px 38px;transform:none!important;width:auto;height:auto;border:0;box-shadow:none}
.reader-overlay .window-actions,.reader-overlay .window-titlebar,.reader-overlay .window-status{display:none}
.reader-overlay .portfolio-section{padding:20px 16px}
.reader-overlay .portfolio-section p{font-size:14px}
.reader-overlay .taskbar{position:absolute;height:34px}
.reader-overlay .terminal-command{padding:9px;font-size:9px}
@keyframes reader-in{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.js.os-open.reader-overlay .desktop{animation:none}}
.screen-start{position:fixed;left:0;top:0;z-index:3;width:180px;height:130px;transform-origin:0 0;background:#49ffb509;border:3px solid #a0ffc0;border-radius:6%;cursor:pointer;color:#c6ffda;box-shadow:inset 0 0 20px #3fffad35,0 0 20px #6affaa65;display:flex;align-items:end;justify-content:center;padding:18px;transition:background .2s,box-shadow .2s}
.screen-start span{font:600 24px var(--mono);letter-spacing:3px;white-space:nowrap;padding:10px 18px;background:#03120ce8;border:1px solid #a0ffc0;text-shadow:0 0 12px #60ffa0}
.screen-start b{margin-left:12px}.screen-start:hover,.screen-start:focus-visible{background:#6affaa20;box-shadow:inset 0 0 35px #3fffad55,0 0 30px #6affaa95;outline:3px solid #e2ffec;outline-offset:7px}
.approaching-monitor .screen-start,.os-open .screen-start{opacity:0;pointer-events:none;visibility:hidden}
body:not(.scene-ready) .screen-start{left:50%;top:52%;transform:translateX(-50%);width:200px;height:65px;padding:0;border-radius:0}
body:not(.scene-ready) .screen-start span{font-size:12px;letter-spacing:1px;border:0}
@media(max-width:640px){.screen-start span{font-size:44px;letter-spacing:3px;padding:12px 20px}.screen-start{border-width:5px;padding:22px}}
.light-controls{position:fixed;right:5%;top:125px;z-index:32;display:flex;gap:7px}
.light-controls button{display:flex;align-items:center;gap:7px;padding:8px 11px;background:#070c13db;color:#bfcbd5;border:1px solid #34424f;font-size:11px;border-radius:4px}
.light-controls i{width:6px;height:6px;border-radius:50%;background:#e77dff;box-shadow:0 0 9px #d25bff}
.light-controls [data-light=blue] i{background:#6ce6ff;box-shadow:0 0 9px #42ceff}
.light-controls button span{font-size:9px;color:#90b9b9}.light-controls button[aria-pressed=false]{color:#77838d;border-color:#242a33}.light-controls button[aria-pressed=false] i{background:#414955;box-shadow:none}
.monitor-view .light-controls{top:16px}.reading .light-controls,.reader-overlay .light-controls{display:none}
@media(max-width:640px){.light-controls{top:auto;bottom:100px;right:16px;gap:5px}.light-controls button{padding:7px 9px;font-size:10px}.monitor-view .light-controls{top:12px;bottom:auto}}