:root{--bg:#07170d;--panel:#0c2415;--ink:#c1ffc8;--accent:#a7ffad;--muted:#91bf9c;--line:#365e41}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 ui-monospace,"SFMono-Regular",Consolas,monospace}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px dashed var(--accent);outline-offset:4px}header{padding:22px 36px;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--line);max-width:1300px;margin:auto}.brand{font-size:34px;font-weight:800;letter-spacing:-2px;text-decoration:none;color:var(--ink)}.brand span{color:var(--accent)}.headernote,.eyebrow{font-size:11px;letter-spacing:1.7px;color:var(--muted)}.badge{margin-left:auto;border:1px solid var(--line);padding:5px 10px;font-size:11px}main{max-width:1120px;margin:44px auto;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:40px 80px}.intro h1{font-size:56px;letter-spacing:-3px;line-height:1.12;margin:28px 0}.intro>p:not(.eyebrow){max-width:390px;color:var(--muted)}.notice{border-left:2px solid var(--accent);padding:10px 15px;font-size:12px;max-width:400px;margin:28px 0;color:var(--muted)}nav{display:flex;flex-wrap:wrap;gap:8px}button{min-height:44px;background:transparent;border:1px solid var(--line);color:var(--ink);padding:9px 14px;border-radius:5px}button:hover{background:#163b23}button.primary{background:var(--accent);color:#061d0d;border-color:var(--accent);font-weight:700}button.active{border-color:var(--accent);background:#183b23}button.danger{border-style:dashed}.stage{min-height:470px;border:1px solid var(--line);background:var(--panel);display:flex;align-items:center;justify-content:center}.frame{background:#153721;border:1px solid #557e60;border-radius:14px;padding:9px;transform:scale(1.3)}.screen{width:240px;height:320px;background:#041309;border-radius:5px;padding:12px;display:flex;flex-direction:column;overflow:hidden;font-size:16px;line-height:1.3}.screen>*{flex-shrink:0}.screen .status{font-size:11px;color:var(--muted);margin-bottom:10px;letter-spacing:1px}.screen h2{font-size:23px;line-height:1.15;letter-spacing:-1px;margin:6px 0 12px;overflow-wrap:anywhere}.screen p{font-size:15px;margin:7px 0}.screen .quiet{font-size:13px;color:var(--muted)}.screen button{font-size:15px;min-height:43px;padding:7px}.screen .actions{display:grid;gap:8px;margin-top:auto}.face{display:block;width:100%;height:78px;flex-shrink:0;fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;animation:float 3s infinite}.face .head{fill:#123b20}.face .eyes{fill:var(--accent);stroke:none;transform-origin:60px 38px;animation:blink 5s infinite}.big{font-size:38px;font-weight:700;margin:8px 0}.small{font-size:11px;color:var(--muted);line-height:1.6}.panel{grid-column:1/-1;border-top:1px solid var(--line);padding:26px 0;scroll-margin-top:20px}.panel h2{font-size:28px;letter-spacing:-1px;margin:0 0 10px}.panel h3{font-size:18px;margin:24px 0 12px}.panel .help{color:var(--muted);font-size:13px;max-width:740px}label{display:block;font-size:14px;color:var(--ink);margin-bottom:14px}input,select{display:block;width:100%;color:var(--ink);background:#0b2916;border:1px solid #5b8466;border-radius:4px;padding:10px;margin-top:5px;min-height:44px;color-scheme:dark}input:invalid:not(:placeholder-shown){border-style:dashed}form{max-width:760px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.buttons{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.block{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;padding:14px 0;border-bottom:1px solid var(--line)}.block label{margin:0}.block button{margin-bottom:0}.summary{font-size:18px;color:var(--accent);margin:20px 0}.items{max-width:850px;display:grid;gap:14px}.item{padding:18px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.item h3{margin:0 0 8px}.item p{margin:5px 0;color:var(--muted);font-size:13px}.item .buttons{margin-bottom:0}.tag{font-size:11px;border:1px solid var(--line);padding:3px 6px;display:inline-block}.conflict{border-left:3px solid var(--accent);padding:12px 16px;background:#12331d;margin:12px 0}.conflict p{font-size:13px}.planblock{max-width:850px;border-left:2px solid var(--line);padding:8px 16px;margin:12px 0}.planblock h3{margin:0 0 6px}.planblock p{font-size:13px;color:var(--muted);margin:4px 0}.toast{position:fixed;bottom:20px;left:20px;right:20px;max-width:700px;background:var(--accent);color:#07170d;border:2px solid #061d0d;padding:15px 20px;font-size:14px;z-index:10}footer{max-width:1120px;margin:30px auto;padding:24px 32px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);display:flex;gap:20px;justify-content:space-between}[hidden]{display:none!important}@keyframes float{50%{translate:0 -2px}}@keyframes blink{0%,44%,48%,100%{scale:1 1}46%{scale:1 .1}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}@media(max-width:800px){main{gap:36px;grid-template-columns:1fr 1fr;padding:0 22px}.intro h1{font-size:42px}.headernote{display:none}.frame{transform:scale(1.1)}.stage{min-height:410px}}@media(max-width:620px){header{padding:18px 22px;gap:16px}.badge{font-size:9px;max-width:150px}main{grid-template-columns:1fr;margin-top:26px}.intro h1{font-size:40px;margin:18px 0}.intro h1 br{display:none}.intro>p:not(.eyebrow){font-size:14px}.notice{margin:18px 0}.stage{min-height:460px}.frame{transform:scale(1.3)}.grid{grid-template-columns:1fr}.block{gap:8px;grid-template-columns:1fr 1fr}.block button{grid-column:1/-1}.panel h2{font-size:24px}footer{padding:22px;flex-direction:column;gap:8px}}
.screen h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;max-height:108px;overflow:hidden}
.screen .face-button{height:78px;min-height:78px;padding:0;border:0;background:none}.face-button:hover .head{fill:#205730}.reply{max-width:760px;padding:18px;border-left:2px solid var(--accent);background:#12331d;font-size:18px;margin:20px 0}.screen .face{pointer-events:none}.screen:has(.status) h2{font-size:22px}textarea{font:inherit;display:block;width:100%;color:var(--ink);background:#0b2916;border:1px solid #5b8466;border-radius:4px;padding:10px;margin-top:5px;resize:vertical}textarea:focus-visible{outline:3px dashed var(--accent);outline-offset:4px}audio{max-width:100%;margin:15px 0}
.screen.chat-screen .face{height:52px}.screen.chat-screen h2{font-size:20px;line-height:1.2;-webkit-line-clamp:4;max-height:96px;margin:6px 0 10px}.chat-screen p.quiet{font-size:12px}

.screen .studying{height:190px;min-height:190px;margin:14px 0 0}
.screen .study-face{height:180px;stroke:var(--accent);stroke-width:3;fill:none}
.study-face .book{fill:#123b20}
.reading-head{transform-origin:70px 65px;animation:reading 4s ease-in-out infinite}
@keyframes reading{50%{transform:rotate(3deg) translateY(2px)}}
.screen.work-controls h2{-webkit-line-clamp:2;max-height:48px;font-size:21px;margin-bottom:4px}
.screen.work-controls .big{font-size:32px;margin:2px 0}
.screen.work-controls p{font-size:13px;margin:4px 0}
@media(prefers-reduced-motion:reduce){.reading-head{animation:none}}

.screen:has([data-action="workControls"])>.face-button{height:48px;min-height:48px}

.screen.work-controls{position:relative}.screen .work-menu{position:absolute;right:8px;top:4px;width:44px;min-height:44px;border:0;padding:0;font-size:24px}.screen.work-controls .status{padding-right:44px}

.study-clock{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;line-height:14px}.screen:has(.study-clock) .studying{height:176px;min-height:176px;margin-top:0}
.login-layout{display:block;max-width:620px}.login-layout h1{font-size:44px;line-height:1.1;letter-spacing:-2px}.login-layout form{margin-top:28px}.panel table{width:100%;max-width:760px;border-collapse:collapse;font-size:13px}.panel th,.panel td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line)}
a{color:var(--green,#a7ffad);text-underline-offset:3px}a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
/* A single workspace per tab; the device preview stays in Focus only. */
[hidden]{display:none!important}.app-shell>header{max-width:1120px;margin:auto;padding:22px 0;display:flex;align-items:center;gap:24px}.app-shell>header .headernote{flex:1}.top-tabs{max-width:1120px;margin:0 auto;display:flex;gap:8px;border-bottom:1px solid var(--line);padding:0 0 12px;overflow-x:auto}.top-tabs button,.top-tabs a{white-space:nowrap;min-height:44px;padding:11px 18px;border:1px solid transparent;background:transparent;color:var(--muted);text-decoration:none;border-radius:6px;font:inherit}.top-tabs .active{color:var(--ink);background:#123b20;border-color:#42674b}.app-shell main{display:block;max-width:1120px;margin:0 auto;padding:30px 0 60px}.app-shell .panel{width:100%;max-width:none;margin:0;padding:0;border:0}.app-shell .panel h2{margin-top:0}.app-shell .preview{width:100%;max-width:420px;margin:0 auto}.connection-status{max-width:1120px;margin:12px auto 0;font-size:12px;color:var(--muted);min-height:18px}.app-shell>footer{max-width:1120px;margin:auto;padding:20px 0}.app-shell .panel .help{max-width:760px}.app-shell .panel form{max-width:900px}@media(max-width:1180px){.app-shell>header,.top-tabs,.connection-status,.app-shell main,.app-shell>footer{margin-left:20px;margin-right:20px}}@media(max-width:600px){.app-shell>header .headernote{display:none}.app-shell>header{justify-content:space-between}.top-tabs{gap:2px}.top-tabs button,.top-tabs a{padding:10px 12px}.app-shell main{padding-top:22px}.app-shell .panel h2{font-size:28px}}
.settings-detail{max-width:900px;border-top:1px solid var(--line);margin-top:26px;padding:16px 0}.settings-detail summary{cursor:pointer;color:var(--ink);padding:8px 0}.settings-detail[open]>label,.settings-detail[open]>.grid{margin-top:20px}.settings-detail table{max-width:100%}