/* Reference-inspired evergreen surfaces, translucent panels and lime accents. */
:root{--accent:#b5ff51;--muted:#a2b7af;--border:#29433e;color:#edf4ef;background:#6c8274}
body{padding:32px;background:radial-gradient(ellipse at 85% 0,#83a88880,transparent 65%),linear-gradient(135deg,#536b60,#81988a);min-height:100vh}
.app-shell{max-width:1660px;margin:auto;background:#041716;border:1px solid #173e31;border-radius:32px;box-shadow:0 32px 65px #10231e45;overflow:hidden}
header{height:100px;border:0;padding:0 30px;gap:32px}.brand{font-size:19px;letter-spacing:-.7px}.brand small{font-size:9px;letter-spacing:3px;font-weight:500}header p{border-left:1px solid var(--border);padding-left:28px;font-size:12px}header .primary{background:var(--accent);color:#102006;border-radius:11px;padding:14px 20px}header .primary:hover:not(:disabled){background:#c9ff83;color:#102006}
main{grid-template-columns:290px minmax(0,1fr);gap:22px;padding:4px 24px 24px;align-items:start;min-height:0}aside{padding:14px 10px 0;border:0}h1{font-size:27px;font-weight:550;letter-spacing:-.9px}.intro{font-size:12px;line-height:1.75;margin-bottom:21px}
button{background:#142e2b;border-radius:11px;font-size:12px;transition:background .18s,border-color .18s,transform .18s}button:hover:not(:disabled){border-color:#8eaf7c;background:#203e31;color:#edf4ef}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.42}
.upload{border:1px solid #527458;background:radial-gradient(ellipse at 90% 100%,#79bf4840,transparent 80%),#142c27;border-radius:13px;padding:20px 6px}.upload strong{font-size:12px}.upload span{color:#b6c5bd}.upload:hover,.upload.drag{border-color:var(--accent);background-color:#203d2b}.text-button{background:none;font-size:11px;margin:4px 0 19px}
.modes,.tabs{background:#132c29;border-radius:12px;padding:4px;gap:4px}.modes button,.tabs button{border-color:transparent;background:transparent}.modes .selected,.tabs .selected,.selected{background:linear-gradient(115deg,#243d36,#3a5b35);border-color:#587253;color:#e7ffd7;box-shadow:inset 0 1px 0 #ffffff12,0 3px 8px #0002}.hint{font-size:10px;line-height:1.65}.range{margin:20px 0}.range output{color:#d5e5ce;background:#18342d;min-width:32px;text-align:center;border-radius:6px;font-size:10px;padding:3px 5px;margin-top:-3px}.range input{margin-top:16px;cursor:pointer}.check{font-size:11px;gap:9px}.check input{width:15px;height:15px}.second{padding-top:23px;margin-top:23px}.row button{font-size:10px}
footer{font-size:10px;color:#c0d2bb;margin-top:24px;padding:16px;border:1px solid #3c5847;border-radius:13px;background:radial-gradient(ellipse at 100% 100%,#84ce4330,transparent 95%),#102822}
.workspace{position:sticky;top:24px;background:radial-gradient(ellipse at 75% 18%,#254b352a,transparent 70%),#08201e;border:1px solid #314a43;border-radius:20px;min-height:690px;overflow:hidden}.toolbar{padding:19px 22px;border-bottom-color:#29423e80}#filename{font-size:13px;font-weight:500;color:#e4ece6;max-width:50%}.tabs button{font-size:11px;padding:8px 12px;white-space:nowrap}
.empty{min-height:550px;background:radial-gradient(ellipse at 50% 48%,#90d95416,transparent 55%)}.empty-symbol{width:100px;height:100px;border:1px solid #56764b;border-radius:25px;color:var(--accent);font-size:65px;display:grid;place-items:center;background:linear-gradient(135deg,#203d31,#294b3340);box-shadow:0 0 65px #afff3c0e}.empty h2{font-size:38px;line-height:1.18;margin:26px 0 10px}.empty p{font-size:12px;line-height:1.85}.empty button{margin-top:16px;background:var(--accent);border-color:var(--accent);color:#102006;padding:13px 23px}.empty button:hover{background:#c9ff83;color:#102006}
.previews{gap:22px;padding:26px;min-height:550px}.previews.solo{grid-template-columns:minmax(0,540px);justify-content:center;width:100%;margin:auto}figcaption{display:flex;align-items:center;gap:8px}figcaption:before{content:"";width:5px;height:5px;background:var(--accent);border-radius:50%}.paper{border-radius:9px;overflow:hidden;box-shadow:0 15px 28px #0003}.status{padding:16px 22px;border-top-color:#29423e80}
@media(min-width:1400px){body{padding:48px}main{grid-template-columns:300px minmax(0,1fr);gap:28px}.workspace{min-height:800px}.empty,.previews{min-height:660px}.previews{padding:35px;gap:30px}}
@media(max-width:1050px){body{padding:18px}.app-shell{border-radius:25px}header{padding:0 24px;gap:20px}header p{display:none}main{grid-template-columns:245px minmax(0,1fr);gap:16px;padding:0 17px 20px}aside{padding:10px 6px}h1{font-size:24px}.toolbar{padding:16px;flex-wrap:wrap}#filename{max-width:100%;width:100%}.previews{gap:12px;padding:16px}.empty h2{font-size:31px}.status{padding:15px;flex-wrap:wrap;gap:5px}.workspace{min-height:640px}}
@media(max-width:760px){body{padding:8px}.app-shell{border-radius:22px}header{padding:0 16px;height:86px;gap:10px}.brand{font-size:15px}.brand small{font-size:8px;letter-spacing:2px}header .primary{font-size:10px;padding:11px 12px}main{display:flex;flex-direction:column;padding:0 12px 16px;gap:18px}aside{width:100%;padding:12px}h1 br{display:none}h1{font-size:25px}.intro{margin-bottom:16px}.upload{padding:18px}.range{margin:17px 0}.text-button{margin-bottom:14px}footer{margin-top:15px;padding:12px}.workspace{width:100%;position:static;min-height:440px}.toolbar{gap:12px}.toolbar #filename{width:auto}.tabs{margin-left:auto}.empty{min-height:380px;padding:28px 15px}.empty h2{font-size:29px}.empty-symbol{width:78px;height:78px;border-radius:20px;font-size:52px}.previews{min-height:300px;padding:16px;gap:12px}.status{font-size:9px}}
/* TattooKonex signature; a dedicated, softer editor identity than ISO/Splitter. */
:root{--accent:#ff1d1e;--muted:#b2afb2;--border:#383438;color:#f4f1f2;background:#181617}
body{background:radial-gradient(ellipse at 85% 0,#4c202240,transparent 65%),#191718}
.app-shell{background:#0d0d0e;border-color:#3b3032;box-shadow:0 32px 65px #0005}
.brand span{color:#ff393a}.tool-title{font-size:23px;color:#fff;font-weight:650;letter-spacing:-.7px}.tool-title span{display:block;font-size:10px;letter-spacing:.5px;font-weight:400;color:var(--muted);margin-top:5px}
header .primary,.empty button{background:#ff1d1e;color:white;border-color:#ff1d1e;box-shadow:none}header .primary:hover:not(:disabled),.empty button:hover{background:#df1618;color:white}
button,#eraser{background:#242225}button:hover:not(:disabled){background:#343033;border-color:#8b595c}.upload{background:linear-gradient(135deg,#302224,#211e20);border-color:#785053}.upload:hover,.upload.drag{background:#362427}.upload span{color:#c7bfc1}
.modes,.tabs{background:#242225}.modes .selected,.tabs .selected,.selected{background:linear-gradient(115deg,#4c282a,#322225);border-color:#9e494f;color:#fff;box-shadow:inset 0 1px 0 #ffffff0c}
.range output{background:#2d2527;color:#f0d8da}.workspace{background:#151416;border-color:#423a3d}.toolbar,.status{border-color:#383438}#filename{color:#eeeaec}.empty{background:radial-gradient(ellipse at 50% 48%,#ed3a3510,transparent 60%)}.empty-symbol{border-color:#84434a;background:linear-gradient(135deg,#432529,#201a1c);box-shadow:0 0 65px #ff1d1e0b}footer{color:#cabfc1;border-color:#4a363a;background:linear-gradient(135deg,#292023,#181617)}
.inspect-controls{display:grid;grid-template-columns:auto minmax(70px,1fr) auto minmax(60px,.6fr) auto;gap:14px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--border)}.inspect-controls label{font-size:11px;color:#ddd4d7}.inspect-controls output{display:inline-block;min-width:38px;margin-left:6px;color:white;font-variant-numeric:tabular-nums}.inspect-controls input{width:100%;accent-color:var(--accent);min-width:0}.inspect-controls p{grid-column:1/-1;font-size:10px;color:var(--muted);line-height:1.6;margin:0}.inspect-controls button{padding:8px 10px;font-size:11px}.overlay-viewport{height:590px;overflow:auto;padding:20px;background:#1c1a1c;overscroll-behavior:contain}.overlay-viewport #overlay-stage{width:100%;min-width:100%}.overlay-viewport canvas{width:100%;height:auto;max-width:none;box-shadow:0 5px 25px #0004}.toolbar #filename{font-size:12px}.tabs{flex-wrap:wrap}.workspace{min-height:0}.empty,.previews{min-height:560px}
@media(max-width:1050px){header .tool-title{display:block;font-size:19px;padding-left:20px}.inspect-controls{grid-template-columns:1fr 1fr auto;gap:12px}.inspect-controls label:first-child{grid-column:1}.inspect-controls input#opacity{grid-column:2/4}.inspect-controls p{grid-column:1/-1}.overlay-viewport{height:520px}}
@media(max-width:760px){header{flex-wrap:wrap;height:auto;padding:20px 16px;gap:15px}.brand{flex:1}.tool-title{order:3;width:100%;border:0!important;padding-left:0!important;margin:0}.tool-title span{display:inline;margin-left:12px}.toolbar{display:block}.tabs{margin-top:14px;display:flex}.tabs button{flex:1;padding:9px 6px;font-size:10px}.inspect-controls{padding:15px;grid-template-columns:1fr 1fr auto}.overlay-viewport{height:430px;padding:12px}.empty,.previews{min-height:340px}}
.eraser-cursor{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-50%);border:1px solid #171717;border-radius:50%;box-shadow:0 0 0 1px #fff,inset 0 0 0 1px #fff;background:#ffffff12;box-sizing:border-box}
#result.erasing{cursor:none}
@media(prefers-reduced-motion:reduce){button{transition:none}}
/* Viewport fitting is defined in editor.css after the visual theme. */
/* StencilTK drawing desk: reference-inspired light workspace and dark controls. */
:root{font-family:"Helvetica Neue",Arial,sans-serif;background:#d4d3d3}
body{padding:24px;background:radial-gradient(ellipse at 80% 0,#f5f4f4,transparent 65%),#cfcece}
.app-shell{border:6px solid #111;border-radius:32px;background:#101011;box-shadow:0 28px 65px #0002}
header{height:104px;padding:0 26px 0 20px;gap:30px;background:#101011}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 254px;color:white;letter-spacing:-1px}.brand-mark{position:relative;display:block;width:66px;height:48px;overflow:hidden;flex:none;background:#000;border-radius:8px}.brand-mark img{position:absolute;width:128px;height:128px;max-width:none;left:-29px;top:-29px}.brand .brand-name{color:white;font-size:27px;font-weight:400}.brand-name strong{font-weight:800}.brand small{font-size:8px;color:#aaa;letter-spacing:2px;margin-top:7px}
header .tool-title{font-size:21px;padding-left:28px;margin:0}.tool-title span{font-size:11px}header .primary{border-radius:30px;padding:15px 24px;white-space:nowrap}
main{grid-template-columns:284px minmax(0,1fr);gap:0;padding:0;min-height:0;align-items:start}aside{padding:20px 22px 26px}.eyebrow{font-size:8px;letter-spacing:1.3px;color:#c3babc;margin:0 0 14px}h1{font-size:35px;letter-spacing:-1.6px;line-height:1.02;font-weight:650;margin-bottom:16px}.intro{font-size:12px;line-height:1.7;color:#a7a4a5;margin-bottom:24px}
.upload{border:1px dashed #6c5557;border-radius:18px;background:#20191b;padding:23px 8px}.upload:hover,.upload.drag{background:#302024}.text-button{background:transparent;margin:6px 0 24px}.modes{padding:4px;background:#232225;border-radius:13px;gap:2px}.modes button{padding:11px 6px;font-size:11px}.modes .selected,#eraser.selected{background:#432327;border-color:#a63b43;color:#fff}.hint{font-size:10px;line-height:1.7}.range{margin:24px 0}.range output{background:#2d282b;border-radius:6px;padding:3px 7px}.check{margin:15px 0}.second{margin-top:26px;padding-top:25px}#eraser{font-size:11px;line-height:1.5;padding:13px 10px}.row{gap:8px}#blend-control{grid-column:1/-1}footer{background:transparent;border:0;border-top:1px solid #343234;border-radius:0;padding:20px 0 0;color:#a59da1}
.workspace{position:sticky;top:18px;background:#eae9e8;color:#171618;border:0;border-radius:26px 0 0 0;min-height:760px;padding:22px;gap:18px;--muted:#6b6669;--border:#d6d2d4}
.toolbar{padding:0 0 2px;border:0;gap:14px;flex-wrap:wrap}#filename,.toolbar #filename{color:#292528;font-size:12px;font-weight:600;max-width:100%;flex:1;min-width:120px}.tabs{padding:4px;background:#dcd9da;border-radius:30px;gap:3px}.tabs button{color:#666065;background:transparent;border:1px solid transparent;padding:10px 14px;font-size:11px}.tabs .selected{background:#151416;border-color:#151416;color:white;box-shadow:0 2px 5px #0001}.tabs button:hover:not(:disabled){background:#c9c4c6;color:#171618}.tabs .selected:hover:not(:disabled){background:#302a2d;color:#fff}
.empty{min-height:610px;padding:40px 20px;background:#f7f6f5;border:1px solid white;border-radius:24px}.empty-symbol{position:relative;display:block;width:126px;height:94px;overflow:hidden;border:0;border-radius:23px;background:#000;margin-bottom:25px;box-shadow:none}.empty-symbol img{position:absolute;width:245px;height:245px;max-width:none;left:-56px;top:-56px}.empty-kicker{font-size:9px;letter-spacing:2px;color:#777075}.empty h2{font-size:65px;letter-spacing:-3.7px;font-weight:650;line-height:1.02;margin:20px 0}.empty p{font-size:13px;color:#797176;line-height:1.8;margin:0 0 10px}.empty button{border-radius:30px;padding:16px 25px;font-size:12px;margin-top:17px}.file-note{font-size:10px;color:#847b80;margin-top:15px}
.brand-mark{height:44px}.brand-mark img{top:-28px}.empty-symbol{width:136px;height:86px;border-radius:16px}.empty-symbol img{left:-54px;top:-54px}
.previews{padding:20px;gap:20px;background:#dedbdb;border:1px solid #d5d1d2;border-radius:23px;min-height:560px;align-content:start}.previews.solo{grid-template-columns:minmax(0,640px);justify-content:center;max-width:none;width:100%}figcaption{font-size:9px;font-weight:600;letter-spacing:1.4px;margin-bottom:12px}.paper{border-radius:13px;box-shadow:0 8px 20px #35292e12}.status{padding:0 3px;border:0;font-size:10px;gap:12px;flex-wrap:wrap;margin-top:auto}
.inspect-controls{padding:18px;background:#f8f7f7;border:1px solid white;border-radius:18px}.inspect-controls label{color:#4c4147}.inspect-controls output{color:#282125;font-weight:600}.inspect-controls p{color:#746970}.inspect-controls button{background:#e7e3e5;color:#282125;border-color:#d7cfd3}.overlay-viewport{background:#dcd8da;border-radius:20px}.overlay-viewport canvas{box-shadow:0 5px 25px #0002}
@media(min-width:1450px){body{padding:40px}.workspace{padding:28px}.empty{min-height:690px}main{grid-template-columns:304px minmax(0,1fr)}aside{padding:24px 28px}.brand{flex-basis:274px}}
@media(max-width:1100px){body{padding:12px}header{gap:20px;padding:0 18px}.brand{flex-basis:232px}header .tool-title{font-size:18px;padding-left:18px}main{grid-template-columns:264px minmax(0,1fr)}aside{padding:18px}.workspace{padding:18px}.toolbar{display:block}#filename{display:block;margin:0 0 14px}.tabs{width:fit-content}.tabs button{padding:9px 11px}.empty h2{font-size:52px}.previews{padding:14px;gap:14px}}
@media(max-width:760px){body{padding:6px}.app-shell{border-width:4px;border-radius:24px}header{height:88px;padding:0 14px;gap:10px;flex-wrap:nowrap}.brand{flex:1;gap:8px}.brand-mark{width:46px;height:38px}.brand-mark img{width:96px;height:96px;left:-22px;top:-21px}.brand .brand-name{font-size:22px}.brand small{font-size:7px;letter-spacing:1px}header .tool-title{display:none}header .primary{padding:12px 14px;font-size:10px}main{display:flex;flex-direction:column}aside{width:100%;padding:18px}.eyebrow{margin-bottom:10px}h1{font-size:29px}.intro{margin-bottom:18px}.upload{padding:20px}.workspace{position:static;width:100%;border-radius:22px 22px 0 0;padding:14px;min-height:0;gap:14px}.tabs{display:flex;width:100%;margin-top:0}.tabs button{flex:1;padding:10px 5px;font-size:10px}.empty{min-height:450px;padding:32px 12px}.empty h2{font-size:48px;letter-spacing:-2.5px}.empty p{font-size:11px}.empty-kicker{font-size:8px;letter-spacing:1.1px}.empty-symbol{margin-bottom:20px}.previews{min-height:300px;padding:12px;gap:12px}.inspect-controls{padding:13px;gap:12px}.status{font-size:9px}.range{margin:18px 0}footer{margin-top:20px}.empty .file-note{font-size:9px}}