:root{color-scheme:light;--ink:#193e35;--muted:#53685d;--paper:#f7f6ee;--line:#d6dbcb;--green:#214f41;--app-height:100vh;--app-top:0px;font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);-webkit-text-size-adjust:100%}
.code-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;margin:4px 0 8px}
.code-row output{-webkit-user-select:all;user-select:all}
.code-row button{font-size:14px}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,summary{cursor:pointer;touch-action:manipulation}button{border:0}button:disabled{opacity:.56;cursor:wait}input{min-width:0;font-size:16px;color:var(--ink);border:1px solid var(--line);border-radius:11px;background:#fffef9;padding:11px 12px}button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #c67645;outline-offset:2px}button:active:not(:disabled){filter:brightness(.92)}[hidden]{display:none!important}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#home{max-width:560px;margin:auto;padding:calc(14px + env(safe-area-inset-top)) max(21px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(21px,env(safe-area-inset-left))}
.mast,.wordmark,.bar,.keys,.inline,#composer{display:flex;align-items:center}.mast{justify-content:space-between;min-height:52px;padding-bottom:12px;border-bottom:1px solid var(--line)}.wordmark{gap:9px;font-size:14px;font-weight:650}.wordmark img{border-radius:10px}.badge{border:1px solid #becab6;border-radius:30px;padding:4px 9px;font-size:11px;color:#526a54}
.hero{position:relative;overflow:hidden;padding:39px 0 24px}.orbit{pointer-events:none;position:absolute;right:-15px;top:0;opacity:.85}.eyebrow,.mini-dot{font-size:11px;font-weight:650;letter-spacing:1.3px}.eyebrow{color:#65775d;margin:0}.hero h1{position:relative;font:600 clamp(43px,11vw,57px)/1.12 "Songti SC","Noto Serif CJK SC",SimSun,serif;letter-spacing:-3px;margin:12px 0}.hero h1 span{color:#c46c3e}.intro,.copy{line-height:1.65;color:var(--muted);font-size:14px}.intro,.copy,h2{margin:0}.card{padding:22px 19px 18px;border:1px solid #d4d9c8;border-radius:19px;background:#fffef8}.card h2{font-size:22px;line-height:1.4}.copy{margin-top:6px}.primary,.secondary,.send{border-radius:11px;min-height:46px;font-weight:650}.primary{display:flex;width:100%;margin-top:20px;align-items:center;justify-content:space-between;background:var(--green);color:white;padding:10px 16px}.primary span{font-size:21px}.enter{border-color:#bdcdb7;background:#e7eddf}.mini-dot{margin-bottom:13px;color:#476349}.mini-dot::before,.live-state::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#819a54;margin-right:6px}.secondary{background:#e8edde;color:var(--green);padding:8px 15px}.codebox{margin-top:15px;padding:13px 16px;border:1px dashed #aabda3;border-radius:12px;background:#f2f5e9}.codebox span,.codebox small,.codebox output{display:block}.codebox span,.codebox small{font-size:12px;color:#5d715d}.codebox output{font:600 26px/1.45 ui-monospace,monospace;letter-spacing:2px;overflow-wrap:anywhere}
.subheading{font-size:13px;margin:24px 0 5px;color:#5a705d}.tool{border-bottom:1px solid var(--line);padding:0 2px}.tool summary{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;min-height:51px;list-style:none}.tool summary::-webkit-details-marker{display:none}.tool summary:after{content:"＋";color:#607252;font-weight:400}.tool[open] summary:after{content:"−"}.tool[open]{padding-bottom:14px}.tool .copy{margin:0 0 11px}.inline,#composer{gap:8px}.inline input,#draft{flex:1}.feedback,.install{font-size:13px;line-height:1.65;color:var(--muted)}.feedback{margin:10px 0 0}.feedback:empty{display:none}.bad{color:#91442e!important}.install{display:grid;gap:3px;padding:18px 0 0;margin-top:15px;border-top:1px solid var(--line)}.install strong{color:var(--ink)}
body.in-live{overflow:hidden}#live{position:fixed;top:var(--app-top);left:0;right:0;height:var(--app-height);display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#21342b}.bar{padding:env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));min-height:calc(46px + env(safe-area-inset-top));background:var(--paper);gap:7px}.bar strong{font-size:15px}.back{width:44px;height:44px;padding:0;background:none;color:var(--ink);font:30px/1 sans-serif}.live-state{margin-left:auto;font-size:12px;color:#466249}.live-state.bad::before{background:#c4794a}#stage{position:relative;min-width:0;min-height:0;overflow:hidden;display:grid;place-items:center}#frame{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#cover{position:absolute;inset:0;display:grid;place-items:center;color:#eff1e6;background:#21342b;font-size:14px;pointer-events:none}.dock{background:var(--paper);padding:7px max(12px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-top:1px solid var(--line)}.dock-tip{font-size:12px;line-height:1.4;color:var(--muted);margin:0 0 5px}.send{padding:8px 17px;min-height:44px;background:var(--green);color:white}.keys{gap:5px;justify-content:flex-end}.keys button{min-height:36px;min-width:51px;padding:3px 9px;background:none;color:var(--muted);font-size:13px}@media(min-width:700px){.hero{padding-top:55px}.dock{padding-inline:max(16px,calc((100vw - 520px)/2))}}
