:root{--paper:#f2eee5;--surface:#fffdf7;--ink:#171914;--muted:#697069;--line:#c8cdc5;--green:#008b72;--lime:#b5ff2d;--coral:#ff6855;--blue:#6d73f5;--yellow:#ffd86d;--soft:#e4e8e0;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box}body{margin:0;min-width:320px;color:var(--ink);background:radial-gradient(circle at 8% 2%,#6d73f516,transparent 30rem),var(--paper);font-family:"Helvetica Neue",Arial,"Noto Sans JP",sans-serif}button,a{font:inherit}button{color:inherit;cursor:pointer;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 16px;font-size:12px;font-weight:800}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #175cff;outline-offset:4px}code,pre{font-family:var(--mono)}button:hover{border-color:var(--ink)}.page{width:min(1660px,calc(100% - 48px));margin:auto;padding:34px 0 50px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:12px 18px 28px}.eyebrow,.label,.section-heading p{color:var(--green);font:900 11px/1.4 var(--mono);letter-spacing:.12em;margin:0 0 9px}.eyebrow{display:flex;gap:10px;align-items:center}.eyebrow i{width:18px;height:18px;border:2px solid var(--blue);border-radius:5px;box-shadow:5px 5px 0 var(--lime)}h1{margin:0;font-size:clamp(28px,4.65vw,78px);line-height:1.08;letter-spacing:0;white-space:nowrap}.lead{font-size:clamp(16px,1.55vw,24px);color:var(--muted);font-weight:750;margin:18px 0 0}.lead strong{color:var(--ink)}.hero-actions{display:flex;gap:8px;flex-shrink:0}.dark{background:var(--ink);color:white}.hero-actions button{min-height:48px}.lab,.guide{background:var(--surface);border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 15px 45px #17191408}.section-heading{display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line)}.number{display:grid;place-items:center;width:50px;height:50px;flex-shrink:0;background:var(--coral);color:white;border-radius:15px;font:900 12px var(--mono)}.number.blue{background:var(--blue)}.number.green{background:var(--green)}.section-heading h2{margin:0;font-size:clamp(21px,2.1vw,32px);line-height:1.2}.section-heading p{margin:0 0 3px}.badge{margin-left:auto;background:var(--soft);padding:10px 14px;border-radius:30px;font:900 11px var(--mono);white-space:nowrap}.lab-grid{display:grid;grid-template-columns:260px minmax(0,1fr)}.controls{background:#f7f4ec;border-right:1px solid var(--line)}.controls section{padding:22px 20px;border-bottom:1px solid var(--line)}.controls section:last-child{border:0}.controls h3{font-size:17px;margin:0 0 16px}.presets,.modes{display:grid;gap:8px}.presets button{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 10px}.presets b{display:grid;place-items:center;width:30px;height:32px;background:var(--soft);border-radius:9px;font:800 11px var(--mono)}.presets span{font-size:13px}.presets small,.modes small{display:block;font-size:10px;margin-top:4px;line-height:1.5}.presets button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}.presets button[aria-pressed=true] b{background:var(--lime);color:var(--ink)}.modes button{display:flex;align-items:center;justify-content:space-between;padding:12px 10px;gap:6px}.modes code{font-size:14px}.modes small{margin:0}.modes button[aria-pressed=true]{background:var(--blue);color:white;border-color:var(--blue)}.help{color:var(--muted);font-size:11px;line-height:1.8;margin:14px 0 0}.try-controls>button{width:100%;margin-top:8px}.lime{background:var(--lime);border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}.workspace{min-width:0;padding:18px;background:var(--soft);display:flex;flex-direction:column;gap:12px}.instruction{display:flex;align-items:center;gap:12px;padding:2px 3px 8px}.instruction>span{font-size:28px;font-weight:900;color:var(--blue)}.instruction p{font-size:13px;font-weight:750;margin:0;line-height:1.6}.instruction b{margin-left:auto;padding:7px 10px;background:var(--blue);border-radius:7px;color:white;font:800 12px var(--mono)}.browser{border:1px solid #b8bfb5;border-radius:18px;overflow:hidden;background:var(--surface);flex:1;display:flex;flex-direction:column}.browser-bar{height:44px;display:flex;align-items:center;gap:12px;padding:0 16px;background:#d6dcd2;border-bottom:1px solid #b8bfb5;font:800 10px var(--mono);color:#58615b}.dots{color:var(--coral);letter-spacing:2px}.native{margin-left:auto;font-size:10px;background:var(--ink);color:white;border-radius:6px;padding:6px}.outer{height:530px;min-height:530px;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-color:var(--coral) #e8e3da;scrollbar-width:auto;position:relative;background:#faf7f0}.scene{padding:24px}.site-head{display:flex;justify-content:space-between;gap:10px;font:900 11px var(--mono);padding-bottom:22px;border-bottom:1px solid var(--line)}.site-head span:last-child{color:var(--coral)}.scene-intro{display:flex;justify-content:space-between;align-items:end;padding:22px 0 18px;gap:16px}.scene-intro h3{font-size:clamp(24px,2.8vw,46px);line-height:1.05;margin:0}.scene-intro p{font-size:11px;color:var(--muted);margin:0;max-width:250px;line-height:1.6}.scene-intro small{display:block;font:800 10px var(--mono);color:var(--green);margin-bottom:8px}.chat-layout{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr);gap:20px}.poster{background:var(--lime);border:2px solid var(--ink);border-radius:18px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;min-height:280px}.poster strong{font-size:clamp(25px,3.6vw,53px);line-height:.95;position:relative}.poster small{font:800 10px var(--mono);margin-top:15px}.orbit{height:120px;width:120px;border:24px solid var(--blue);border-radius:50%;background:var(--coral);margin:15px auto;box-shadow:0 0 0 2px var(--ink);transform:rotate(-16deg)}.inner-shell{border:3px solid var(--blue);border-radius:17px;background:white;min-width:0;overflow:hidden}.inner-head{background:var(--blue);color:white;padding:12px 14px;display:flex;justify-content:space-between;gap:8px;font:900 11px var(--mono)}.inner{height:290px;overflow:auto;scrollbar-color:var(--blue) #eeeaf6;scrollbar-width:auto;outline-offset:-5px!important;overscroll-behavior-y:auto;background:white}.messages{padding:16px 14px;display:grid;gap:14px}.message{max-width:90%;padding:12px 14px;border-radius:14px 14px 14px 3px;background:#f0ede6;font-size:12px;line-height:1.7}.message small{display:block;font:800 10px var(--mono);color:var(--muted);margin-bottom:5px}.message.me{justify-self:end;background:#e8e5ff;border-radius:14px 14px 3px 14px}.edge{font:900 11px var(--mono);padding:18px 12px;text-align:center;background:#e9e6ff;color:#5046ab;border-top:2px dashed var(--blue)}.outer-tail{padding-top:24px}.tail-label{font:900 11px var(--mono);color:var(--coral);margin:0 0 15px}.outer-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.outer-card{border:2px solid var(--ink);border-radius:16px;padding:26px;min-height:240px;display:flex;flex-direction:column;justify-content:space-between}.outer-card:nth-child(3n+1){background:var(--blue)}.outer-card:nth-child(3n+2){background:var(--coral)}.outer-card:nth-child(3n){background:var(--yellow)}.outer-card small{font:800 11px var(--mono)}.outer-card strong{font-size:clamp(23px,2.5vw,38px);line-height:1.1}.sidebar-layout{display:grid;grid-template-columns:minmax(150px,.65fr) minmax(0,1.35fr);gap:20px}.menu-list{list-style:none;margin:0;padding:10px}.menu-list li{padding:15px 12px;border-bottom:1px solid #eee;font-size:12px;font-weight:750}.menu-list b{font:800 10px var(--mono);color:var(--blue);padding-right:8px}.docs-card{background:var(--yellow);border:2px solid var(--ink);border-radius:16px;padding:22px}.docs-card h4{font-size:32px;margin:0 0 16px}.docs-card p{font-size:13px;line-height:1.9}.docs-lines i{display:block;height:9px;background:#17191424;border-radius:8px;margin:16px 0}.docs-lines i:last-child{width:62%}.outer.is-horizontal{overflow-y:hidden}.is-horizontal .scene{display:flex;gap:24px;padding:24px;width:calc(100% + 680px);height:100%;min-height:530px}.shop{flex:0 0 calc(100% - 680px);min-width:0}.shop .scene-intro{padding-top:22px}.rail{display:flex;height:272px;overflow-x:auto;overflow-y:hidden;padding:14px;gap:12px;overscroll-behavior-y:auto;scroll-snap-type:none}.product{flex:0 0 170px;border:2px solid var(--ink);border-radius:12px;padding:16px;background:var(--lime);display:flex;flex-direction:column;justify-content:space-between}.product:nth-child(3n+2){background:var(--coral)}.product:nth-child(3n){background:var(--yellow)}.product strong{font-size:22px}.product span{font:900 10px var(--mono)}.product-art{width:85px;height:85px;border:16px solid var(--ink);border-radius:50%;align-self:center;background:var(--blue);transform:rotate(-20deg)}.rail .edge{flex:0 0 80px;display:grid;place-items:center;border:0;border-left:2px dashed var(--blue);writing-mode:vertical-rl}.board-next{flex:0 0 608px;background:var(--coral);border:2px solid var(--ink);border-radius:16px;padding:35px;display:flex;flex-direction:column;justify-content:space-between}.board-next strong{font-size:62px;line-height:1}.board-next small{font:900 12px var(--mono)}.horizontal-help{font-size:11px;line-height:1.7;color:var(--muted)}.meters{display:grid;grid-template-columns:1fr 38px 1fr;align-items:center;background:var(--ink);color:white;padding:18px 20px;border-radius:14px}.meter>div{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;font-weight:800}.meter small{font:800 10px var(--mono);color:#b8beb3;margin-left:6px}.meter output{font:900 17px var(--mono);color:#c4bdff}.outer-meter output{color:#ff9989}.meter progress{display:block;width:100%;height:6px;border:0;border-radius:9px;overflow:hidden;margin:12px 0 8px;background:#41443c;accent-color:var(--blue)}progress::-webkit-progress-bar{background:#41443c}progress::-webkit-progress-value{background:var(--blue)}.outer-meter progress{accent-color:var(--coral)}.outer-meter progress::-webkit-progress-value{background:var(--coral)}.meter p{font-size:11px;margin:0;color:#c4c9be}.connection{text-align:center;font-size:24px;color:var(--lime)}.measurement-note{font-size:10px;line-height:1.7;color:var(--muted);margin:0 2px}.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}.notes-grid .section-heading{padding:18px}.notes-grid h2{font-size:23px}.section-heading>button{margin-left:auto;white-space:nowrap}.guide-body{padding:22px}.guide-body pre{background:#20231e;color:#c0ff63;border-radius:14px;padding:22px;margin:0;overflow:auto;font-size:13px;line-height:1.8}.guide-body p{font-size:13px;line-height:1.8;margin-bottom:0}.guide-body .help{font-size:11px}table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}th,td{padding:14px 9px;border-bottom:1px solid var(--line)}thead{background:var(--soft)}tbody th{color:#5c51c4}tbody tr:nth-child(2){background:#eeffe0}.cautions{padding:30px 24px;background:#e7e3da;border-radius:22px;margin-top:22px}.cautions h2{font-size:22px;margin:0 0 12px}.cautions p{font-size:13px;line-height:1.9;margin:10px 0 0;max-width:1150px}.page-footer{display:flex;justify-content:space-between;gap:20px;padding:28px 4px;font:800 11px var(--mono);color:var(--muted)}.page-footer a{color:var(--green);margin-left:20px}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:14px 22px;border-radius:12px;background:var(--ink);color:white;font-size:13px;max-width:90vw;box-shadow:0 6px 30px #0003;z-index:10;display:none}.toast.visible{display:block}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:1200px){.hero{flex-wrap:wrap;gap:16px}.hero-actions{margin-left:auto}.lab-grid{grid-template-columns:230px minmax(0,1fr)}.controls section{padding:20px 15px}.notes-grid{grid-template-columns:1fr}.chat-layout{grid-template-columns:minmax(120px,.65fr) minmax(0,1.35fr)}.scene{padding:18px}.scene-intro p{display:none}.poster{padding:15px}.orbit{width:95px;height:95px;border-width:18px}.site-head{font-size:10px}.inner-head{font-size:10px}.sidebar-layout{gap:12px}.docs-card{padding:16px}.docs-card h4{font-size:25px}}
@media(max-width:760px){.page{width:calc(100% - 24px);padding-top:20px}.hero{padding:8px 6px 22px}.hero-actions button{min-height:42px}.eyebrow{font-size:10px}.section-heading{padding:16px 14px;gap:10px}.section-heading h2{font-size:21px}.section-heading p{font-size:10px}.number{width:40px;height:44px;border-radius:12px}.badge{font-size:10px;padding:8px}.lab-grid{display:block}.controls{border:0;display:grid;grid-template-columns:1fr 1fr}.controls section{padding:16px 12px}.controls section:first-child{border-right:1px solid var(--line)}.controls h3{font-size:14px;margin-bottom:10px}.presets button{padding:9px 6px;gap:6px}.presets b{width:23px;flex-shrink:0}.presets span{font-size:12px}.presets small{display:none}.modes button{padding:9px 6px;min-height:50px;display:block;text-align:left}.modes code{font-size:12px}.modes small{font-size:10px}.controls .try-controls{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:10px}.try-controls .label{grid-column:1/-1;margin-bottom:0}.try-controls .help{grid-column:1/-1;margin-top:3px}.try-controls>button{margin:0;font-size:11px;padding:12px 7px}.workspace{padding:12px}.instruction{gap:6px}.instruction p{font-size:11px}.instruction b{font-size:10px}.outer{height:510px;min-height:510px}.scene{padding:14px}.scene-intro{padding:18px 0 14px}.scene-intro h3{font-size:27px}.chat-layout{display:block}.poster{display:none}.inner{height:270px}.inner-head{padding:12px}.browser-bar{padding:0 10px;gap:7px}.native{display:none}.site-head{gap:5px}.site-head span:last-child{font-size:10px}.outer-card{padding:15px;min-height:210px}.outer-card strong{font-size:25px}.meters{padding:15px 12px;grid-template-columns:1fr 24px 1fr}.meter>div{align-items:flex-start;flex-direction:column;gap:5px}.meter small{margin-left:3px}.meter output{font-size:17px}.meter p{font-size:10px;line-height:1.5}.sidebar-layout{grid-template-columns:minmax(100px,1fr) minmax(0,1fr);gap:9px}.menu-list{padding:4px}.menu-list li{padding:14px 5px;font-size:10px}.menu-list b{display:block;padding:0 0 3px}.docs-card{padding:12px}.docs-card h4{font-size:23px}.docs-card p{font-size:11px}.sidebar-layout .inner-head{font-size:10px;padding:11px 7px}.sidebar-layout .inner-head span:last-child{display:none}.is-horizontal .scene{padding:14px;min-height:510px;gap:20px}.product{flex-basis:148px}.rail{height:282px}.shop .scene-intro h3{font-size:25px}.notes-grid .section-heading{flex-wrap:wrap}.guide-body{padding:16px}.guide-body pre{padding:16px;font-size:12px}.cautions{padding:24px 18px}.cautions h2{font-size:20px}.page-footer{flex-wrap:wrap}.page-footer a{margin:0 18px 0 0}}
/* Keep a bounded scrollport: flex growth must not expand it to content height. */
.browser{flex:0 0 auto}.outer{flex:none;height:560px;min-height:560px}
.poster{height:327px;min-height:0}.poster strong{font-size:clamp(25px,3vw,44px)}.orbit{height:100px;width:100px;border-width:20px;margin:10px auto}
@media(max-width:760px){.outer{height:510px;min-height:510px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}