.tool-page{width:min(1180px,100% - 36px);margin:0 auto;padding:clamp(54px,8vw,96px) 0 72px}.tool-page-hero{grid-template-columns:minmax(300px,.72fr) minmax(500px,1.18fr);align-items:center;gap:clamp(40px,7vw,86px);display:grid}.tool-page-hero--wide{grid-template-columns:minmax(280px,.62fr) minmax(580px,1.38fr)}.tool-censor-hero{grid-template-columns:1fr;align-items:stretch;gap:clamp(30px,4vw,46px);display:grid}.tool-censor-hero__heading{justify-items:start;gap:14px;display:grid}.tool-censor-hero__heading h1{text-wrap:balance;max-width:none;font-size:clamp(44px,5.5vw,68px)}.tool-censor-hero__body{grid-template-columns:minmax(240px,.44fr) minmax(0,1.56fr);align-items:start;gap:clamp(32px,5vw,64px);display:grid}.tool-censor-info{border-bottom:1px solid var(--line);padding:20px 0}.tool-censor-info .tool-page-points{gap:0;width:100%}.tool-censor-info .tool-page-points li{border-top:1px solid var(--line);padding:11px 0}.tool-censor-info .tool-page-points li:last-child{border-bottom:1px solid var(--line)}.tool-page-hero__copy{justify-items:start;gap:22px;display:grid}.tool-page-label{color:var(--aqua);font:700 11px/1 var(--font-pixel);letter-spacing:.06em;margin:0}.tool-page-hero h1{letter-spacing:-.055em;margin:0;font-size:clamp(42px,6vw,70px);line-height:.98}.tool-page-hero__copy>p:not(.tool-page-label),.tool-page-section p{color:var(--text-soft);margin:0;font-size:16px;line-height:1.7}.tool-page-points,.tool-feature-list,.tool-steps{gap:10px;margin:0;padding:0;list-style:none;display:grid}.tool-page-points li{color:var(--text-soft);align-items:center;gap:10px;font-size:12px;display:flex}.tool-page-points li:before{content:"";background:var(--mint);width:7px;height:7px}.tool-workbench{border:1px solid var(--line-bright);background:var(--ink-2);min-width:0;box-shadow:10px 10px 0 var(--ink-0);border-radius:9px;overflow:hidden}.tool-workbench>header{border-bottom:1px solid var(--line);background:var(--ink-3);justify-content:space-between;align-items:center;gap:20px;min-height:62px;padding:12px 16px;display:flex}.tool-workbench>header>div{gap:5px;display:grid}.tool-workbench>header span{color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;font-size:9px}.tool-workbench>header h2{font:700 14px/1.1 var(--font-pixel);letter-spacing:-.03em;margin:0}.tool-workbench>header .tool-workbench__ready{color:var(--mint)}.tool-primary-button,.tool-secondary-button,.tool-play-button{border:1px solid var(--line-bright);min-height:42px;font:700 12px var(--font-ui);cursor:pointer;border-radius:5px;justify-content:center;align-items:center;padding:0 18px;display:inline-flex}.tool-primary-button{border-color:var(--berry);color:var(--ink-0);background:var(--berry);box-shadow:3px 3px 0 var(--berry-dark)}.tool-secondary-button,.tool-play-button{color:var(--text);background:var(--ink-3)}.tool-primary-button:disabled,.tool-secondary-button:disabled{opacity:.45;cursor:not-allowed}.tool-pixelator__stage{border:1px dashed var(--line-bright);width:calc(100% - 32px);min-height:360px;color:var(--text);background:linear-gradient(45deg, var(--ink-1) 25%, transparent 25%) 0 0 / 20px 20px, linear-gradient(45deg, transparent 75%, var(--ink-1) 75%) 0 0 / 20px 20px, linear-gradient(45deg, transparent 75%, var(--ink-1) 75%) 10px -10px / 20px 20px, linear-gradient(45deg, var(--ink-1) 25%, var(--ink-0) 25%) 10px 10px / 20px 20px;cursor:pointer;place-items:center;margin:16px;padding:18px;display:grid}.tool-pixelator__stage>span{gap:8px;display:grid}.tool-pixelator__stage small{color:var(--text-dim)}.tool-pixelator__stage canvas{max-width:min(330px,100%);height:auto;max-height:330px;image-rendering:pixelated}.tool-censor__stage{background:linear-gradient(45deg, var(--ink-1) 25%, transparent 25%) 0 0 / 20px 20px, linear-gradient(45deg, transparent 75%, var(--ink-1) 75%) 0 0 / 20px 20px, linear-gradient(45deg, transparent 75%, var(--ink-1) 75%) 10px -10px / 20px 20px, linear-gradient(45deg, var(--ink-1) 25%, var(--ink-0) 25%) 10px 10px / 20px 20px;place-items:center;min-height:460px;padding:16px;display:grid;overflow:auto}.tool-censor__stage:not(.has-image){min-height:390px}.tool-censor__stage>button{border:1px dashed var(--line-bright);width:100%;min-height:340px;color:var(--text);background:var(--ink-2);cursor:pointer;place-content:center;gap:8px;padding:42px;display:grid}.tool-censor__stage>button small{color:var(--text-dim)}.tool-censor__canvas-wrap{width:min(var(--tool-censor-width), 100%);aspect-ratio:var(--tool-censor-aspect);box-shadow:0 0 0 1px var(--line-bright), 8px 8px 0 var(--ink-0);line-height:0;position:relative}.tool-censor__canvas-wrap canvas{width:100%;height:100%;display:block}.tool-censor__selection{color:var(--berry);cursor:crosshair;touch-action:none;position:absolute;inset:0}.tool-censor__controls{border-top:1px solid var(--line);grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;padding:14px 16px 16px;display:grid}.tool-censor__controls label{gap:8px;min-width:0;display:grid}.tool-censor__controls label>span{color:var(--text-soft);justify-content:space-between;font-size:11px;font-weight:700;display:flex}.tool-censor__controls output{color:var(--aqua)}.tool-censor__controls input{width:100%;accent-color:var(--berry)}.tool-censor__region-actions{gap:8px;display:flex}.tool-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 16px 16px;display:grid}.tool-controls label,.tool-speed-control{gap:8px;display:grid}.tool-controls label>span,.tool-speed-control>span{color:var(--text-soft);justify-content:space-between;font-size:11px;font-weight:700;display:flex}.tool-controls output,.tool-speed-control output{color:var(--aqua)}.tool-controls input,.tool-speed-control input{width:100%;accent-color:var(--berry)}.tool-error{color:var(--danger);margin:0;padding:0 16px 12px;font-size:12px}.tool-workbench__actions{border-top:1px solid var(--line);justify-content:flex-end;gap:8px;padding:14px 16px;display:flex}.tool-pixel-frame{width:calc(256px * var(--tool-frame-scale,1));aspect-ratio:var(--tool-frame-columns) / var(--tool-frame-rows);grid-template-columns:repeat(var(--tool-frame-columns), 1fr);grid-template-rows:repeat(var(--tool-frame-rows), 1fr);background:var(--ink-0);image-rendering:pixelated;display:grid;overflow:hidden}.tool-pixel-frame>span{min-width:0;min-height:0}.tool-animation-stage{background:linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 20px 20px, var(--ink-0);place-items:center;min-height:360px;display:grid;position:relative}.tool-animation-stage>span{color:var(--text-dim);font:700 9px var(--font-pixel);position:absolute;bottom:12px;right:14px}.tool-frame-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:10px;display:grid}.tool-frame-strip button{border:1px solid var(--line);min-width:0;color:var(--text);background:var(--ink-1);cursor:pointer;place-items:center;padding:8px;display:grid;position:relative}.tool-frame-strip button.is-active{border-color:var(--berry);box-shadow:inset 0 0 0 1px var(--berry)}.tool-frame-strip button>span{color:var(--text-dim);font-size:8px;position:absolute;top:4px;left:5px}.tool-speed-control{padding:14px 16px 17px}.tool-sheet-preview{background:linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 16px 16px, var(--ink-0);justify-content:center;align-items:center;min-height:230px;padding:28px;display:flex;overflow-x:auto}.tool-sheet-preview .tool-pixel-frame{flex:none}.tool-inline-select{align-items:center;gap:8px;display:flex}.tool-inline-select select{border:1px solid var(--line-bright);min-height:32px;color:var(--text);background:var(--ink-1)}.tool-sheet-order{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--line);grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;display:grid}.tool-sheet-order>div{color:var(--text-soft);background:var(--ink-2);justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;font-size:10px;display:flex}.tool-sheet-order>div>span:first-child{align-items:center;gap:7px;display:flex}.tool-sheet-order strong{color:var(--aqua)}.tool-sheet-order button{border:1px solid var(--line);width:28px;height:28px;color:var(--text);background:var(--ink-1);cursor:pointer}.tool-sheet-order button:disabled{opacity:.3;cursor:not-allowed}.tool-sheet-json{max-height:160px;color:var(--mint);background:var(--ink-1);margin:0;padding:14px 16px;font:10px/1.5 monospace;overflow:auto}.tool-page-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:minmax(0,1fr) minmax(340px,.85fr);gap:clamp(40px,8vw,100px);margin-top:clamp(80px,12vw,140px);padding:clamp(34px,6vw,60px);display:grid}.tool-page-section>div{align-content:start;gap:18px;display:grid}.tool-page-section h2{letter-spacing:-.045em;max-width:15ch;margin:0;font-size:clamp(32px,4vw,50px);line-height:1.05}.tool-steps,.tool-feature-list{counter-reset:tool-step}.tool-steps li,.tool-feature-list li{border:1px solid var(--line);background:var(--ink-2);gap:5px;padding:16px;display:grid}.tool-steps strong,.tool-feature-list strong{color:var(--text)}.tool-steps span,.tool-feature-list span{color:var(--text-dim);font-size:12px;line-height:1.5}.tool-related{flex-wrap:wrap;justify-content:center;gap:8px;padding-top:38px;display:flex}.tool-related a{border:1px solid var(--line);min-height:38px;color:var(--text-soft);background:var(--ink-2);border-radius:5px;align-items:center;padding:0 14px;font-size:11px;font-weight:700;text-decoration:none;display:inline-flex}.tool-related a:hover{border-color:var(--aqua);color:var(--text)}@media (max-width:900px){.tool-page-hero,.tool-page-hero--wide,.tool-censor-hero__body,.tool-page-section{grid-template-columns:1fr}.tool-censor-info{max-width:680px;padding:18px 0}.tool-page-hero__copy{max-width:680px}}@media (max-width:560px){.tool-page{width:min(100% - 24px,1180px);padding-top:38px}.tool-page-hero h1{font-size:42px}.tool-pixelator__stage,.tool-animation-stage,.tool-censor__stage{min-height:280px}.tool-censor__stage>button{min-height:230px}.tool-controls,.tool-sheet-order,.tool-censor__controls{grid-template-columns:1fr}.tool-censor__region-actions{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.tool-workbench__actions{flex-direction:column;align-items:stretch}.tool-page-section{padding:30px 0}}
