:root{--ink:#263e39;--muted:#79827b;--green:#285448;--mint:#ddecdf;--paper:#faf9f5;--line:#e2e5dc;--orange:#d07b47}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Avenir Next','Segoe UI',sans-serif;font-size:14px}button,input,select{font:inherit}button,a,input,select,summary{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--orange);outline-offset:4px}header{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.brand{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-weight:bold;font-size:35px;letter-spacing:-2px}.brand-icon{font-size:35px;color:var(--green)}.brand-detail{font:9px 'Avenir Next','Segoe UI',sans-serif;letter-spacing:2px;margin-left:20px;padding-left:22px;border-left:1px solid #cdd4cb;max-width:160px;line-height:1.8}.prototype{font-size:9px;letter-spacing:1.6px;color:var(--muted);display:flex;align-items:center;gap:10px}.prototype i,.live-dot{width:6px;height:6px;background:#74a68b;border-radius:50%;display:inline-block}main{max-width:1530px;margin:auto;padding:28px 5vw 0}.eyebrow{font-size:10px;letter-spacing:2.3px;font-weight:700;color:#64806d}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,3.8vw,54px);letter-spacing:-2px;line-height:1.08;margin:16px 0}h1 em{color:var(--green);font-weight:400} .intro{position:relative;padding-bottom:24px}.intro>p{position:absolute;right:0;bottom:47px;font-size:14px;line-height:1.9;color:#758078;max-width:400px}.studio{display:grid;grid-template-columns:286px 1fr;border:1px solid #dce1d6;border-radius:16px;overflow:hidden;background:white;box-shadow:0 14px 40px #203b2c06}.controls{padding:22px 22px;border-right:1px solid var(--line)}.section-label{font-size:9px;font-weight:700;letter-spacing:1.6px;display:flex;gap:10px;align-items:center;margin-bottom:19px}.section-label>span{font-size:9px;background:#eef2e9;padding:4px 5px;border-radius:4px;color:#7a8b7f}.upload{border:1px dashed #c0cebe;background:#f6f8f2;display:flex;align-items:center;flex-direction:column;text-align:center;padding:18px 7px;border-radius:8px;cursor:pointer;gap:8px}.upload.drag{background:#ddecdf}.upload input{display:none}.upload-icon{font-size:25px;color:var(--green)}.upload strong{font-size:12px}.upload small{font-size:9px;color:var(--muted)}.privacy{font-size:9px;text-align:center;color:#869085;margin:10px 0 19px}.sample-row{display:flex;gap:5px;align-items:center;font-size:9px;white-space:nowrap}.sample-row>span{margin-right:auto;color:var(--muted)}.sample{font-size:9px;border:1px solid var(--line);background:white;padding:6px 8px;border-radius:15px;color:var(--green)}.sample.active{background:var(--mint);border-color:var(--mint)}.source-box{display:flex;align-items:center;gap:11px;margin:17px 0 22px}.source-box>div:first-child{width:50px;height:55px;background:#fafaf7;border:1px solid var(--line);border-radius:6px;flex-shrink:0}.source-box svg{width:100%;height:100%}.source-box strong{display:block;font-size:11px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source-box small{font-size:9px;color:var(--muted);line-height:1.6;display:block;margin-top:4px}.field{display:flex;justify-content:space-between;font-size:11px;font-weight:600;margin:18px 0 9px}.field output{font-size:10px;color:var(--muted)}select{width:100%;background:white;border:1px solid var(--line);border-radius:6px;padding:10px;font-size:11px;color:var(--ink)}input[type=range]{width:100%;accent-color:var(--green);cursor:pointer}.hint{font-size:10px;line-height:1.6;color:var(--muted);margin:7px 0 15px}.wide{width:100%;padding:11px;border-radius:6px;font-size:11px;font-weight:600}.secondary{background:white;border:1px solid #d7ded3;color:var(--green)}.primary{background:var(--green);border:1px solid var(--green);color:white;display:flex;justify-content:space-between}.export-block{border-top:1px solid var(--line);margin-top:24px;padding-top:22px}.download-row{display:flex;justify-content:space-between;margin-top:12px}.download-row button{border:0;background:none;font-size:10px;color:var(--green);padding:3px 0}.workbench{min-width:0;background:#f3f5ee;display:flex;flex-direction:column}.bench-header{display:flex;align-items:center;justify-content:space-between;padding:25px 28px;font-size:11px}.bench-header strong{font-weight:500;margin-left:7px}.check{font-size:10px;display:flex;align-items:center;gap:6px;color:#728170}.check input{accent-color:var(--green)}.canvases{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:5px 25px 25px;align-items:start}.canvas-card{min-width:0}.canvas-title{font-size:8px;letter-spacing:1.4px;display:flex;justify-content:space-between;align-items:center;margin:0 7px 20px;font-weight:700}.canvas-title>span{font-size:8px;letter-spacing:0;color:var(--muted);font-weight:400}.artboard{width:100%;aspect-ratio:1;background:#fffdf8;border-radius:10px;border:1px solid #e3e6da;box-shadow:0 8px 12px #374a3210;overflow:hidden}.artboard svg{width:100%;height:100%;display:block}.caption{text-align:center;font-size:9px;color:#7d887a;margin-top:17px}.mint-dot{width:5px;height:5px;background:#3a866e;display:inline-block;border-radius:50%;margin-right:5px}.playback{border-top:1px solid #dfe5d8;display:flex;align-items:center;gap:12px;padding:22px 25px 13px}.play-button{border:0;border-radius:50%;width:41px;height:41px;flex-shrink:0;background:var(--green);color:white;font-size:14px}.step-copy{display:flex;flex-direction:column;gap:5px;flex:1}.step-copy strong{font-size:12px;font-weight:600}.step-copy span{font-size:10px;color:var(--muted)}.text-button{background:none;border:0;color:var(--green);font-size:10px;white-space:nowrap}.reset-button{border:1px solid #d9e0d2;background:none;border-radius:50%;width:29px;height:29px;color:var(--green);font-size:17px;flex-shrink:0}.timeline{padding:0 27px}.timeline input{height:3px}.steps{display:flex;justify-content:space-between;padding:10px 0}.steps button{border:0;background:transparent;padding:4px;color:#8b9589;font-size:9px;width:22px;height:22px;border-radius:50%}.steps button.done{background:#dce8d8;color:#2f5748}.steps button.current{background:var(--green);color:white}.status{margin-top:auto;font-size:10px;color:#7f8878;line-height:1.7;padding:7px 27px 20px;min-height:57px}.status.error{color:#a4472c}.instructions{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:38px;padding:43px 0 33px;border-bottom:1px solid var(--line)}h2{font-family:Georgia,serif;font-size:28px;font-weight:400;line-height:1.2;margin:13px 0}.number{font:italic 20px Georgia,serif;color:#709276}.instructions h3{font-size:12px;font-weight:600;margin:13px 0 8px}.instructions p,.mechanics p{font-size:11px;line-height:1.8;color:var(--muted);margin:0}.mechanics{padding:22px 0;border-bottom:1px solid var(--line)}.mechanics summary{cursor:pointer;font-size:11px;color:#637565}.mechanics p{margin-top:14px;max-width:800px}footer{display:flex;justify-content:space-between;padding:24px 0;font-size:10px;color:#8a9284}#print-pages{display:none}
@media(min-width:1500px){.canvases{padding-top:25px}.studio{grid-template-columns:310px 1fr}}
@media(max-width:1050px){main{padding:30px 3vw 0}header{padding:0 3vw}.intro>p{position:static;font-size:12px}.intro{padding-bottom:25px}h1{font-size:46px}.studio{grid-template-columns:250px 1fr}.controls{padding:20px 16px}.canvases{gap:10px;padding:0 14px 25px}.bench-header{padding:22px 16px}.canvas-title{font-size:7px;letter-spacing:.7px}.playback{padding:18px 16px 10px;flex-wrap:wrap}.step-copy{min-width:140px}.step-copy span{line-height:1.5}.instructions{gap:20px}}
@media(max-width:720px){header{height:70px}.brand-detail{display:none}.prototype{font-size:7px}.intro{padding-top:8px}h1{font-size:41px}.studio{display:flex;flex-direction:column}.controls{border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.controls>.section-label,.upload,.privacy,.sample-row,.source-box,.export-block{grid-column:1/-1}.source-box{margin:14px 0 0}.field{grid-column:1}.controls select,.controls>input{grid-column:2;grid-row:auto;align-self:center}.controls .hint{grid-column:1/-1}.controls>.secondary{grid-column:1/-1}.export-block{margin-top:16px;padding-top:16px}.export-block .hint{margin-bottom:0}.canvases{padding-top:12px}.canvas-title{flex-wrap:wrap;gap:5px;min-height:22px;margin-bottom:12px}.caption{font-size:8px;line-height:1.5}.bench-header{padding-bottom:8px}.instructions{grid-template-columns:1fr 1fr;gap:25px}.instructions .eyebrow{font-size:8px}.steps button{font-size:8px;width:18px;padding:0}.status{padding-left:18px;padding-right:18px}.timeline{padding:0 17px}.text-button{margin-left:auto}.step-copy{flex-basis:60%}.playback{gap:10px}footer{font-size:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media print{@page{size:A4 portrait;margin:10mm}body{background:white}body>header,body>main{display:none!important}#print-pages{display:block;color:#111;font-family:Arial,sans-serif}.print-page{height:275mm;break-after:page;page-break-after:always;overflow:hidden}.print-page:last-child{break-after:auto;page-break-after:auto}.print-page h1{font:bold 21px Arial;letter-spacing:0;margin:4mm 0 2mm}.print-page p{font:12px/1.6 Arial;margin:3mm 0}.print-art{width:190mm;height:190mm;display:block;margin:3mm auto}.print-footer{font-size:10px;border-top:1px solid #aaa;padding-top:4mm}.calibration{width:50mm;border-top:1px solid black;text-align:center;font-size:9px;padding-top:2mm;margin:5mm 0}}
@media(max-width:720px){.steps{flex-wrap:wrap;gap:3px;justify-content:flex-start}.steps button{width:20px;height:24px}}
.character-gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.character-card{min-width:0;border:1px solid var(--line);border-radius:8px;background:white;padding:8px;color:var(--ink);text-align:left}.character-card.active{border-color:#55836c;background:#edf4e9;box-shadow:0 0 0 1px #55836c}.character-card img{display:block;width:100%;height:104px;object-fit:contain;margin-bottom:8px}.character-card strong{font-size:10px;line-height:1.5;display:block}.character-card small{font-size:8px;color:var(--muted)}.sample-credit{font-size:9px;line-height:1.6;color:var(--muted);margin:10px 0}.sample-credit span{display:block;margin-top:4px}.sample-credit a{color:var(--green)}#compare-source{margin:0 0 15px}.source-box img{width:100%;height:100%;object-fit:contain}#comparison{max-width:1050px;width:94vw;max-height:94vh;border:1px solid var(--line);border-radius:16px;padding:24px;color:var(--ink);background:var(--paper)}#comparison::backdrop{background:#152d25aa}.comparison-heading{display:flex;justify-content:space-between;align-items:start}.comparison-heading h2{margin:10px 0 20px}.comparison-heading button{border:0;background:transparent;font-size:28px;color:var(--ink);cursor:pointer}.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.comparison-grid figure{margin:0;background:white;border:1px solid var(--line);padding:12px;border-radius:10px}.comparison-grid figcaption{font-size:10px;letter-spacing:1.4px;margin:5px 0 15px;text-align:center}.comparison-grid img{width:100%;height:60vh;object-fit:contain}.comparison-grid+p{font-size:10px;color:var(--muted)}.workbench{align-self:start;position:sticky;top:0;min-height:795px}.studio{overflow:visible}.controls{border-radius:16px 0 0 16px}.workbench{border-radius:0 16px 16px 0}.status{margin-top:auto}@media(max-width:720px){.character-gallery,.sample-credit,#compare-source{grid-column:1/-1}.character-gallery{grid-template-columns:repeat(4,1fr)}.character-card img{height:74px}.character-card small{display:none}.character-card strong{font-size:8px}.workbench{position:static;width:100%;min-height:0}.comparison-grid{gap:8px}.comparison-grid figure{padding:6px}.comparison-grid img{height:50vh}.comparison-grid figcaption{font-size:8px}.controls{border-radius:16px 16px 0 0}.workbench{border-radius:0 0 16px 16px}}
@media print{body>dialog{display:none!important}}