/* v0.2: the approved scene supplies the physical hardware; HTML remains interactive. */
:root{--bg:#12100c;--text:#e0d2b5;--muted:#a79c86;--amber:#dcb77d;--line:#514736}
body{background:#100e0b;min-height:100svh;display:flex;flex-direction:column}
#main{flex:1;background:#100e0b}
.texture{opacity:.11}
.header{height:64px;min-height:64px;padding:0 2.4%;gap:36px;background:linear-gradient(#18150fd9,#10100ced),url('assets/laboratory-lite.webp') 35% 0 / 180%;border-bottom:1px solid #82705166}
.brand{font-size:30px;letter-spacing:5px;font-weight:400;color:#edddbc;display:flex;align-items:center;gap:12px}
.orbit{width:33px;height:27px;display:inline-grid;place-content:center;border:1px solid #b99967;border-radius:50%;font-size:17px;transform:rotate(-25deg);color:#dab47a;position:relative}
.orbit:after{content:'';position:absolute;inset:-4px 5px;border:1px solid #b99967;border-radius:50%;transform:rotate(-28deg)}
.header nav{gap:0;border-left:1px solid #7e6d4a66;height:24px}
.header nav a{font-size:16px;padding:0 36px;border-right:1px solid #7e6d4a66;color:#d0bea1;letter-spacing:1px}
.header nav a.active:after{bottom:-20px;height:1px;left:25%;right:25%;background:#c5a36b}
.header nav a.active{color:#fff0cf}
.visitor{color:#c6b28e;font-size:10px;letter-spacing:1px;border-left:1px solid #7e6d4a66;padding-left:20px}
.visitor .tiny-dot{background:#c2a47a}
.scenic-home{padding:0;min-height:0;display:block;background:#100e0b;overflow:hidden}
.scene{position:relative;width:min(135%,max(100%,calc((100svh - 106px)*2)));left:50%;transform:translateX(-50%);aspect-ratio:2 / 1;isolation:isolate;container-type:inline-size}
.scene-backdrop{display:block;width:100%;height:100%;position:absolute;inset:0;z-index:-1;object-fit:fill}
.crt-zone{position:absolute;left:13.45%;top:21.1%;width:44.5%;height:61.3%;border-radius:3% / 4%;overflow:hidden;isolation:isolate}
.character-layer{position:absolute;left:9%;top:-10%;width:84%;height:auto;transform-origin:50% 90%;animation:crt-breathe 4.8s ease-in-out infinite;will-change:transform;filter:saturate(.79) sepia(.09) brightness(.94);opacity:.96}
.character-cutout{width:100%;display:block;clip-path:polygon(50% 3%,43% 3.4%,37% 5%,32% 7.5%,28% 11%,26.7% 15%,26.5% 24%,26.5% 32%,26% 39%,25% 45.5%,24% 48.2%,19% 50.5%,17% 52%,15% 58%,12% 71%,8% 92%,7% 100%,93% 100%,91% 90%,88% 73%,85% 58%,83% 53%,79% 50.3%,75% 48%,74% 42%,73% 33%,72.5% 22%,71.5% 15%,69% 10%,65% 6.8%,59% 4%,54% 3%)}
.crt-zone:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse,transparent 35%,#160d0640 85%,#090a0799);z-index:3}
.crt-lines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,#160f0b24 3px 4px);z-index:2;opacity:.65}
.crt-meta{position:absolute;left:4%;top:6%;font-family:var(--mono);font-size:clamp(8px,.83vw,15px);line-height:1.75;letter-spacing:.3px;color:#d2c5ab;text-shadow:0 0 2px #c4a16b40;z-index:4}
.crt-meta>span{font-size:.8em;color:#bdb198}
.crt-bottom{position:absolute;bottom:5%;left:4%;right:4%;display:flex;justify-content:space-between;align-items:end;z-index:4;font:clamp(8px,.75vw,13px) var(--mono);color:#bdae92}
.crt-bottom .tiny-dot{width:4px;height:4px;margin-right:7px;background:#bca378}
.crt-bottom time{max-width:110px;text-align:right;line-height:1.7;letter-spacing:1px}
.communication{position:absolute;left:65.8%;top:41.9%;width:18.1%;height:43.6%;display:flex;flex-direction:column;min-height:0;color:#e2d4b8}
.comm-status{display:flex;align-items:center;justify-content:space-between;padding:0 0 1.3cqw;flex-shrink:0;border-bottom:1px solid #8c734c44}
.comm-label{display:block;color:#b4a180;font:clamp(8px,.65vw,12px) var(--mono);letter-spacing:2px;margin-bottom:.7cqw}
.comm-ready{display:flex;gap:.55cqw;align-items:center;font-size:clamp(10px,.95vw,17px);letter-spacing:.2px}
.comm-ready .tiny-dot{background:#e8ba66;box-shadow:0 0 7px #ffb941}
.communication .wave{color:#776c52;font-size:1.2cqw}
.communication .chat-log{flex:1;height:auto;min-height:0;padding:1cqw .2cqw .5cqw 0;scrollbar-color:#6b5739 transparent}
.communication .chat-entry{border-left:0;padding:0;margin:0 0 1.2cqw;animation:arrive .25s ease}
.communication .chat-entry .speaker{font:clamp(8px,.6vw,11px) var(--mono);color:#b6a17e;letter-spacing:1px}
.communication .chat-entry p{font-size:clamp(12px,1.02vw,18px);line-height:1.9;margin:.4cqw 0;color:#eadbbd}
.communication .chat-entry:first-child{border:1px solid #9a856059;border-radius:3px;padding:1cqw .9cqw;margin-top:.2cqw;background:#08090836}
.communication .chat-entry:first-child .speaker{display:none}
.communication .chat-entry.user p{color:#ad9c80}
.communication .chat-entry a{color:#d7b77f;font-size:clamp(11px,.9vw,16px);line-height:1.7;margin:.3cqw 0}
.communication #chat-form{flex-shrink:0;border-top:1px dashed #89704a66;padding-top:.8cqw}
.communication .message-input{border:1px solid #8d795857;border-radius:3px;background:linear-gradient(#11120f99,#0d0e0a99);box-shadow:inset 0 1px 5px #0009}
.communication .message-input textarea{font-size:clamp(11px,.9vw,16px);color:#e2d2b3;padding:.75cqw .65cqw;min-height:0;line-height:1.7;height:3.7cqw;font-family:var(--serif)}
.communication .message-input textarea::placeholder{color:#a89b85}
.communication .message-input button{width:3cqw;flex-shrink:0;border-left:1px solid #8b77534a;padding:0;font-size:1.5cqw;color:#d9c49a;background:linear-gradient(130deg,#685b3b33,#28271c33);transform:none}
.communication .message-input button:hover{background:#6c573c55;color:#fff4d4}
.communication .demo-note{font-size:clamp(8px,.62vw,11px);letter-spacing:.4px;color:#af9e80;margin:.55cqw 0 0;white-space:nowrap}
.demo-lamp{display:inline-block;width:4px;height:4px;background:#ae8055;border-radius:50%;margin-right:5px}
.mobile-tubes{display:none}
footer{padding:13px 2.4%;min-height:42px;background:linear-gradient(#12100de6,#17130fe6),url('assets/laboratory-lite.webp') bottom / cover;border-top:1px solid #68523466;color:#958367;font-size:8px}
footer button{color:#ae9876;font-size:10px}
.archive{background:linear-gradient(90deg,#17150ff5,#1c170fe8);max-width:1300px;border-left:1px solid #66523522;border-right:1px solid #66523522;min-height:calc(100svh - 106px)}
.archive .intro,.notice,.project p,.note-row p,.member p{color:#b2a68d}.archive-top{border-color:#6f5c3b}.project,.member,.note-row,.note-list{border-color:#54452e}.project-number{color:#8e7855}.filters button{border-color:#695537;color:#c3b392}.filters button.selected{background:#c0a476;color:#171109}.member-badge{background:linear-gradient(135deg,#54452a,#211c13);border-color:#7b6848}.member-badge span{color:#cbb389}.project:hover,.note-row:hover{background:#be9f6a0a}dialog{background:#211c13;border-color:#8b7250}dialog p{color:#c6b99f}.draft-form input,.draft-form textarea{background:#14110c;border-color:#6c5c40;color:#e3d5bb}.draft-form label{color:#c4b69a}
@keyframes crt-breathe{0%,100%{transform:translate(0,0) rotate(-.25deg) scale(1)}50%{transform:translate(.35%,-.85%) rotate(.35deg) scale(1.012)}}
@media(min-width:1800px){.scene{max-width:2100px;margin:0 auto}.crt-meta{font-size:15px}.communication .chat-entry p{font-size:18px}.communication .comm-ready{font-size:17px}}
@media(min-width:701px) and (max-width:1000px){.header{gap:20px;padding:0 3%;height:60px;min-height:60px}.header nav a{padding:0 19px;font-size:14px}.brand{font-size:24px;gap:6px}.orbit{width:25px;height:23px;font-size:14px}.visitor{font-size:8px;padding-left:10px}.scenic-home{min-height:calc(100svh - 100px)}.scene{width:120%;min-width:120%;left:-10%}.communication{left:65.6%;width:18.5%}.communication .comm-ready{font-size:10px}.communication .wave{display:none}.communication .chat-entry p{font-size:12px}.communication .message-input textarea{font-size:11px}.communication .demo-note{font-size:8px}.crt-meta{font-size:9px}}
@media(max-width:700px){.header{height:102px;min-height:102px;padding:14px 6% 0;gap:0;background:#12100de8}.brand{font-size:25px;letter-spacing:4px;gap:7px}.orbit{width:25px;height:22px;font-size:14px}.header nav{height:43px;border:0}.header nav a{padding:0;border:0;font-size:13px}.header nav a.active:after{bottom:0;left:0;right:0}.visitor{font-size:8px;letter-spacing:1px;padding-left:13px}.scenic-home{display:block;min-height:0;background:linear-gradient(#100d0b33,#100d0bcc),url('assets/laboratory-lite.webp') center top / auto 900px}.scene{aspect-ratio:auto;width:100%;padding-top:101%;padding-bottom:30px;background:url('assets/laboratory-lite.webp') 9.2% 0 / 169% auto no-repeat;container-type:inline-size}.scene-backdrop{display:none}.crt-zone{left:13.7%;top:17.8cqw;width:75.2%;height:51.7cqw;border-radius:4%;}.character-layer{left:9%;top:-10%;width:84%}.crt-meta{font-size:8px;left:4%;top:7%}.crt-meta>span{font-size:7px}.crt-meta br:nth-of-type(2),.crt-meta br:nth-of-type(3),.crt-meta>span:last-child{display:none}.crt-bottom{font-size:7px;bottom:5%;left:4%;right:4%}.crt-bottom time{max-width:80px;font-size:7px}.communication{position:relative;inset:auto;width:86%;height:auto;margin:-11cqw auto 0;padding:25px 22px 20px;border:1px solid #8f735047;box-shadow:0 2px 25px #000a,inset 0 0 0 6px #18140e;border-radius:8px;background:linear-gradient(#0a0a08d9,#0a0a08ed),url('assets/laboratory-lite.webp') 80% 80% / 700%;}.mobile-tubes{display:block;width:100%;height:22cqw;background:url('assets/laboratory-lite.webp') 79.15% 31.8% / 575% auto no-repeat;margin:-3px 0 16px;filter:brightness(1.08);border-bottom:1px solid #6e58374d}.comm-status{padding:0 0 16px}.comm-label{font-size:9px;letter-spacing:2px;margin-bottom:8px}.comm-ready{font-size:13px;gap:9px}.communication .wave{font-size:15px;display:inline}.communication .chat-log{height:230px;flex:none;padding:16px 0 8px}.communication .chat-entry{margin:0 0 17px}.communication .chat-entry:first-child{padding:14px 12px;margin-top:3px}.communication .chat-entry .speaker{font-size:9px}.communication .chat-entry p{font-size:14px;line-height:1.9;margin:6px 0}.communication .chat-entry a{font-size:12px;margin:7px 0}.communication #chat-form{padding-top:12px}.communication .message-input textarea{font-size:13px;padding:12px 10px;height:66px}.communication .message-input button{font-size:21px;width:42px}.communication .demo-note{font-size:9px;margin-top:10px}.archive{min-height:calc(100svh - 175px)}footer{padding:15px 6%;gap:12px}footer button{font-size:10px}footer>div{gap:15px}.footer-clock{font-size:8px}}
@media(prefers-reduced-motion:reduce){.character-layer{animation:none}}
@media(min-width:1800px){.scene{max-width:none;margin:0}}
@media(min-width:701px) and (max-width:1000px){.scene{transform:none}}
@media(max-width:700px){.scene{left:0;transform:none}}