:root{font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;color:#18313b;background:#f3f6f7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1100px;margin:auto;padding:40px 24px}.hero{padding:10px 0 28px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:#317474}h1{font-size:clamp(27px,4vw,43px);letter-spacing:-1px;margin:12px 0}p{line-height:1.75;color:#546a74}.workspace{background:#fff;border:1px solid #dbe5e9;border-radius:20px;padding:24px;box-shadow:0 14px 45px #17323f08}.topline,.caption{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:16px}.badge{color:#246a65;font-size:13px}#progress,#record-count{font-size:13px;color:#617680}#stage{height:330px;position:relative;overflow:hidden;background:#000;border-radius:12px;isolation:isolate}#surface,#grid{position:absolute;inset:0}#grid{background-image:linear-gradient(#8888 1px,transparent 1px),linear-gradient(90deg,#8888 1px,transparent 1px);background-size:10% 10%;pointer-events:none}#overlay{display:none;position:absolute;top:15px;left:15px;right:15px;justify-content:space-between;align-items:center;color:#fff;transition:opacity .2s}#overlay-label{background:#16232bcc;padding:8px 12px;border-radius:8px}#overlay button{background:#16232bcc;color:#fff;border-color:#b3bbc2}.caption{margin:16px 0;font-size:14px;flex-wrap:wrap}.caption strong{font-size:19px}.palette{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}.palette button{padding:7px 3px;font-size:12px}.swatch{display:block;width:100%;height:24px;border:1px solid #84929e55;border-radius:4px;margin-bottom:5px}.palette button[aria-pressed=true]{border-color:#197f79;box-shadow:0 0 0 1px #197f79}.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}button,select,input{font:inherit;font-size:14px;border:1px solid #ccdbe0;border-radius:8px;background:#fff;padding:10px 12px;color:inherit}button{cursor:pointer}button:hover{background:#eef6f6}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true],button.primary{background:#216e69;color:#fff;border-color:#216e69}:focus-visible{outline:3px solid #d49832;outline-offset:3px}.status{font-size:13px;margin:14px 0}.record-panel{border-top:1px solid #e2e9eb;margin-top:22px;padding-top:20px}h2{font-size:20px;margin:0 0 8px}.record-panel p{font-size:13px;margin:5px 0 14px}.record-form{display:flex;gap:12px;flex-wrap:wrap;align-items:end}label{font-size:13px}.record-form label{display:grid;gap:6px}.record-form label:nth-child(2){flex:1;min-width:180px}#records{padding:0;list-style:none}#records li{display:flex;gap:10px;justify-content:space-between;align-items:center;border-bottom:1px solid #e8edef;padding:10px 0;font-size:13px;overflow-wrap:anywhere}#records button{flex-shrink:0;padding:5px 9px}.guide{padding:28px 6px 10px}.guide p,footer{font-size:14px}footer{border-top:1px solid #dbe5e9;padding:20px 6px;color:#647b84;line-height:1.7}a{color:#276f6b}#stage.expanded,#stage:fullscreen{position:fixed;inset:0;width:100%;height:100%;border-radius:0;z-index:10000}#stage.expanded #overlay,#stage:fullscreen #overlay{display:flex}#stage.quiet{cursor:none}#stage.quiet #overlay{opacity:0}#stage:has(#exit:focus-visible) #overlay{opacity:1}body.testing{overflow:hidden}[hidden]{display:none!important}html[data-embedded=true]{background:transparent}html[data-embedded=true] main{padding:12px;max-width:none}html[data-embedded=true] .hero,html[data-embedded=true] .guide,html[data-embedded=true] footer,html[data-embedded=true] h2{display:none}html[data-embedded=true] .workspace{box-shadow:none}@media(max-width:650px){main{padding:24px 12px}.workspace{padding:16px}.palette{grid-template-columns:repeat(5,1fr)}#stage{height:240px}.record-form{display:grid;width:100%}.record-form label:nth-child(2){min-width:0}.controls{gap:8px}button,select,input{max-width:100%}.topline{font-size:12px}}@media(prefers-reduced-motion:reduce){#overlay{transition:none}}

#records{max-height:220px;overflow:auto}