:root{--ink:#213a36;--muted:#75817a;--paper:#f5f4ef;--line:#dcded4;--accent:#26796e;--orange:#c77c35}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:#fffef9;color:var(--ink);border-radius:6px;padding:10px 16px;min-height:44px}button:hover{border-color:var(--accent)}button:focus-visible,canvas:focus-visible,input:focus-visible{outline:3px solid #dfb776;outline-offset:3px}header{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 36px}.brand{font-size:20px;font-weight:650;text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px}.mark{font-size:32px;color:var(--accent)}.brand small{font:10px monospace;letter-spacing:1.5px;color:var(--muted);margin-left:14px}.tools{display:flex;gap:10px}kbd{font:12px monospace;padding:3px 5px;background:#eeeee5;border:1px solid #d9dcd1;border-radius:3px}main{max-width:1680px;margin:auto;padding:32px 36px;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px}.stage{min-width:0}.stage-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.eyebrow{font-size:11px;letter-spacing:1.8px;color:var(--muted);margin:0 0 10px}h1{font-size:clamp(20px,2.2vw,32px);font-weight:550;letter-spacing:-.7px;margin:0}.pill{white-space:nowrap;border:1px solid #b9cec0;background:#e4ece1;font-size:12px;border-radius:30px;padding:8px 12px}.pill.soft{background:#f4e2ca;border-color:#ddbc90}.canvas-wrap{position:relative;border:1px solid #ccd5c8;background:#eaf0e5;overflow:hidden;border-radius:8px}canvas{display:block;width:100%;height:auto;aspect-ratio:16/10;touch-action:none}.canvas-top,.canvas-bottom{position:absolute;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;font:11px monospace;color:#667b6c;pointer-events:none}.canvas-top{top:18px}.canvas-bottom{bottom:15px;font-size:10px}.canvas-top i{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:7px}.controlbar{display:flex;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);font-size:12px}.keys{display:flex;gap:20px;flex-wrap:wrap}.keys>span{display:flex;gap:5px;align-items:center}.check{display:flex;gap:6px;align-items:center;white-space:nowrap}.caption{color:var(--muted);font-size:12px;line-height:1.9}.panel{background:#fffef9;border:1px solid var(--line);padding:22px;border-radius:6px;margin-bottom:16px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}h2{font-size:14px;font-weight:600;margin:0}.text-button{border:0;padding:0;min-height:20px;font-size:11px;color:var(--muted);background:none}.range{display:block;font-size:12px;margin:22px 0 0}.range output{float:right;font-family:monospace;color:var(--accent)}input[type=range]{display:block;width:100%;margin:14px 0 0;accent-color:var(--accent)}dl{margin:16px 0}dl>div{display:flex;justify-content:space-between;padding:9px 0}dt{color:var(--muted);font-size:12px}dd{font-family:monospace;margin:0}.legend{font-size:10px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:center;gap:7px}.dot{width:6px;height:6px;border-radius:50%;display:inline-block}.teal{background:var(--accent)}.amber{background:var(--orange);margin-left:10px}.note{padding:12px 2px;font-size:12px;line-height:1.9}.note p{color:#66766b}.note .muted{font-size:11px;color:#899187}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:20px 36px;color:var(--muted);font-size:11px}.touch{display:flex;gap:8px;margin-top:15px}.touch button{flex:1;touch-action:none;user-select:none}.touch button.held{background:#26796e;color:#fff}@media(min-width:1000px){.touch{max-width:440px}}@media(max-width:900px){main{grid-template-columns:1fr;padding:22px 18px;gap:20px}aside{display:grid;grid-template-columns:1fr 1fr;gap:14px}.note{grid-column:1/-1}.panel{margin:0}header{padding:0 18px;height:70px}.brand small{display:none}canvas{aspect-ratio:1.35}.controlbar{flex-direction:column}.canvas-bottom>span:first-child{max-width:70%;line-height:1.5}footer{padding:20px 18px;gap:15px}}@media(max-width:480px){.brand{font-size:16px;gap:6px}.tools{gap:5px}.tools button{padding:8px}.tools kbd{display:none}.stage-heading{align-items:flex-start}h1{font-size:21px}.pill{font-size:10px;padding:7px}.panel{padding:16px}aside{grid-template-columns:1fr}.note{grid-column:auto}.keys{gap:10px;font-size:11px}.canvas-top,.canvas-bottom{left:12px;right:12px;font-size:9px}footer span{max-width:55%}}
.field-label{display:block;font-size:12px}.field-label select{width:100%;padding:10px;background:#f7f7ef;border:1px solid var(--line);border-radius:4px;color:var(--ink);margin-top:10px;font:inherit;min-height:44px}.settings-badge{font-size:10px;color:var(--accent)}.apply-button{width:100%;margin-top:18px;background:#e4ece1;border-color:#b9cec0;font-size:12px}.mini-hint{font-size:10px;color:var(--muted);line-height:1.7;margin:9px 0 0}.behavior-check{font-size:12px;margin-top:21px;white-space:normal;line-height:1.5}.grid-settings .panel-head{margin-bottom:18px}