:root{--ink:#1d3044;--muted:#758285;--cream:#f5f2e9;--line:#dcded5;--navy:#183e5e;--gold:#b48b4b;--sage:#d7e2d8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fffdf5;color:var(--ink);border-radius:8px;padding:11px 15px;transition:background .2s,transform .2s}button:hover:not(:disabled){background:#e7eadd}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #bc9957;outline-offset:3px}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:default;opacity:.36}.shell{max-width:1360px;margin:auto;padding:0 46px}header{height:112px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px}.wordmark{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-family:Georgia,serif;font-size:32px;letter-spacing:-1px}.wordmark small{display:block;font:9px Arial;letter-spacing:2px;margin-top:7px}.mark{border:1px solid #91a09d;border-radius:50%;width:47px;height:47px;display:grid;place-items:center;font:23px Georgia}.header-right{display:flex;align-items:center;gap:24px}.local-badge{font-size:11px;color:var(--muted)}.quiet{background:none;border:0;border-radius:4px;padding:7px;font-size:12px}.intro{padding:49px 0 35px}.eyebrow{font-size:9px;letter-spacing:2.2px;font-weight:bold;color:#7a8a85;margin:0 0 14px}h1{font:normal 56px/1.1 Georgia,serif;letter-spacing:-1.8px;margin:0 0 15px}h2{font:normal 24px Georgia,serif;margin:0}.intro>p:last-child{font-size:13px;line-height:1.85;color:#71807e;margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}.stage-card{min-width:0;background:#e7e9df;border:1px solid #d8dcd0;border-radius:14px;overflow:hidden}.stage-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:21px 25px;font-size:11px;letter-spacing:.6px}.live-tag{color:#7c8b84;font-size:9px;display:flex;gap:6px;align-items:center}.live-tag i{width:5px;height:5px;border-radius:50%;background:#76967c}#scene{width:100%;aspect-ratio:650/460;min-width:0;touch-action:none;overflow:hidden}#scene svg{display:block;width:100%;height:100%;touch-action:none}.stage-footer{display:flex;justify-content:space-between;gap:30px;padding:18px 25px 24px;border-top:1px solid #d9ded1;color:#6c7f76;font-size:10px;line-height:1.6}.seal{text-align:center;letter-spacing:1.5px;font-size:8px;white-space:nowrap;border:1px solid #a5b4a2;border-radius:50%;padding:12px;transform:rotate(-8deg)}.controls{background:#fffdf6;border:1px solid var(--line);border-radius:14px;padding:24px}.control-title{display:flex;align-items:center;justify-content:space-between;gap:5px}.control-title .eyebrow{font-size:8px;letter-spacing:1.6px;margin-bottom:9px}.control-title h2{font-size:20px}#mini{height:57px;margin:15px 0 12px;background:#f1f1e8;border-radius:5px;overflow:hidden}#mini svg{display:block;width:100%;height:100%}.range-row{margin:15px 0 21px}.range-row label{display:flex;justify-content:space-between;font-size:11px;color:#566c66}.range-row output{font-size:10px;color:#97a095}input[type=range]{width:100%;margin:13px 0 0;accent-color:#355c6a;height:12px;cursor:pointer}.process{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:23px 0 14px}.process button{display:flex;align-items:center;gap:9px;padding:12px 9px;font-size:10px;text-align:left;background:#edf0e6;border:1px solid #d9e0d3}.process b{display:grid;place-items:center;border:1px solid #bccbbd;border-radius:50%;min-width:20px;height:20px;font-size:9px;font-weight:normal}.process button.ready{background:var(--navy);color:white;border-color:var(--navy)}.process button.ready:hover{background:#295571}.feedback{font-size:10px;line-height:1.7;color:#7b8981;min-height:50px;margin:0}.coat-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e7e8df;padding-top:14px;margin-top:8px}.coat-row span{font-size:8px;letter-spacing:1.4px;color:#728980}.presets{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:37px 0;padding-bottom:35px;border-bottom:1px solid var(--line)}.presets .eyebrow,.rack .eyebrow{font-size:8px}.presets h2{font-size:23px}#presets{display:flex;gap:9px;flex-wrap:wrap}#presets button{font-size:10px;border-radius:30px;padding:10px 14px;background:#eeeee4}.rack{margin:0 0 50px}.rack-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.rack-head button{font-size:10px;background:#213e50;color:white;border:0}.rack h2 span{font:10px Arial;color:#94a095;margin-left:13px}.rack-copy{font-size:11px;color:#849084;line-height:1.6}#shelves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}.shelf{min-width:0;border:1px dashed #cbd3c6;border-radius:10px;min-height:135px;padding:16px;color:#a4afa2;display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:10px}.shelf.filled{background:#fffdf5;border-style:solid;text-align:left;color:var(--ink);padding:10px}.shelf-image{height:108px;object-fit:contain;width:100%;border-radius:4px}.shelf-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px}.shelf-bottom button{font-size:9px;padding:7px}.shelf-bottom span{font-size:10px}.delete{color:#89978b}footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:26px 0 33px;font-size:9px;color:#929d90;gap:12px}dialog{border:1px solid var(--line);border-radius:18px;max-width:620px;width:calc(100% - 32px);padding:38px;color:var(--ink);background:var(--cream);box-shadow:0 20px 80px #152d4040}dialog::backdrop{background:#19394c70}.dialog-close{position:absolute;right:16px;top:10px;border:0;background:none;font-size:24px}dialog h2{font-size:30px;margin-bottom:20px}dialog li,dialog p{font-size:12px;line-height:1.85;color:#65766e}dialog li{margin-bottom:13px}dialog a{color:#2b596c}dialog .keys{border-top:1px solid var(--line);padding-top:17px;font-size:10px}#source-copy h3{font:20px Georgia;margin-top:20px}#source-copy p{font-size:10px}
@media(min-width:1100px){.stage-card{position:sticky;top:20px}}@media(max-width:900px){.shell{padding:0 25px}.workspace{grid-template-columns:minmax(0,1fr) 300px;gap:15px}.controls{padding:19px}.stage-heading{padding:18px}.stage-footer{padding:17px;gap:13px}.local-badge{display:none}.presets{align-items:flex-start;flex-direction:column}h1{font-size:47px}}@media(max-width:680px){.shell{padding:0 17px;max-width:100%;overflow-x:clip}header{height:88px}.wordmark{font-size:28px}.wordmark small{font-size:7px}.mark{width:38px;height:38px;font-size:19px}.header-right .quiet{font-size:10px}.intro{padding:30px 0 23px}.intro .eyebrow{font-size:7px;letter-spacing:1.4px}h1{font-size:39px;letter-spacing:-1.1px}.intro>p:last-child{font-size:11px;line-height:1.8}.intro br{display:none}.workspace{grid-template-columns:minmax(0,1fr);gap:15px}.stage-heading{padding:15px;font-size:10px}.live-tag{font-size:8px;letter-spacing:0}#scene{aspect-ratio:650/430}.stage-footer{padding:13px 15px;font-size:9px;gap:12px}.seal{font-size:6px;padding:8px}.controls{padding:22px}.range-row{margin:16px 0}.range-row label{font-size:12px}.range-row output{font-size:11px}.process button{font-size:11px;min-height:48px}.feedback{font-size:11px;min-height:38px}.coat-row span{font-size:9px}#mini{height:64px}.presets{margin:28px 0;padding-bottom:26px}#presets{gap:8px}#presets button{font-size:10px}.rack-head h2{font-size:20px}.rack-head button{font-size:9px;padding:10px}#shelves{gap:8px}.shelf{padding:10px;min-height:108px}.shelf-image{height:75px}.shelf-bottom{flex-wrap:wrap}.shelf-bottom span{font-size:9px}.shelf-bottom button{font-size:8px;padding:6px}.rack{margin-bottom:30px}footer{font-size:8px;flex-wrap:wrap;justify-content:center;text-align:center;gap:14px;padding:20px 0}dialog{padding:29px 24px}dialog h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}