/* Yos ASCII Studio — responsive interface */
:root{color-scheme:dark;--bg:#0b1020;--panel:#121a2b;--panel2:#0e1626;--line:#26334a;--text:#e8efff;--muted:#91a0b8;--accent:#6d8cff;--accent2:#54d6bd;--radius-lg:18px;--radius-md:12px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
:root.light{color-scheme:light;--bg:#f3f6fc;--panel:#fff;--panel2:#f5f7fc;--line:#dce3ef;--text:#172238;--muted:#66748c;--accent:#4268dc;--accent2:#0b9e87}
*{box-sizing:border-box}html{min-width:320px;scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--bg);color:var(--text);overflow-x:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer}
.top{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(14px,3vw,38px);border-bottom:1px solid var(--line);background:var(--panel)}.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:16px}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:1.5px;font-weight:700}.logo{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,var(--accent),#8c65df);color:white;font-size:20px}.top-actions{display:flex;gap:8px;align-items:center}
.wrap{width:min(100%,1600px);padding:24px;margin:auto}.hero{display:flex;justify-content:space-between;gap:18px;margin:8px 0 22px}.hero h1{font-size:clamp(25px,3vw,36px);margin:0 0 7px;letter-spacing:-1px}.hero p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}.pill{align-self:center;padding:8px 12px;border:1px solid var(--line);border-radius:30px;color:var(--accent2);font-size:10px;font-weight:800;letter-spacing:.6px;white-space:nowrap}
.workspace{display:grid;grid-template-columns:minmax(220px,285px) minmax(0,1fr) minmax(245px,300px);gap:14px}.panel{min-width:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px;border-bottom:1px solid var(--line);font-size:13px;font-weight:800}.hint{color:var(--muted);font-size:10px;font-weight:500;line-height:1.5}.panel-body{padding:15px}.left-panel .panel-body{display:flex;flex-direction:column}.upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:150px;padding:18px;border:1.5px dashed var(--line);border-radius:14px;background:var(--panel2);text-align:center;cursor:pointer}.upload:hover,.upload.dragover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel2))}.upload>div{font-size:30px;color:var(--accent)}.upload strong{font-size:13px}.upload small{color:var(--muted);font-size:11px}.upload input{position:absolute;width:1px;height:1px;opacity:0}.section-label{margin:18px 0 9px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:1px}.tabs{display:flex;flex-wrap:wrap;gap:6px}.tab,.preset,.btn{border:1px solid var(--line);border-radius:9px;background:var(--panel2);color:var(--text);transition:.18s}.tab{padding:8px 10px;font-size:11px}.tab.active,.btn.primary{background:var(--accent);border-color:var(--accent);color:white}.tab:hover,.preset:hover,.btn:hover{border-color:var(--accent)}.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.preset{min-height:58px;padding:9px;text-align:left}.preset b,.preset span{display:block}.preset b{font-size:11px}.preset span{margin-top:4px;color:var(--muted);font-size:10px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.btn{padding:9px 12px;font-size:11px;font-weight:700}.btn.small{padding:8px 10px}.field{margin:10px 0;min-width:0}.field label{display:flex;justify-content:space-between;gap:8px;margin-bottom:7px;font-size:11px;font-weight:700}.field input[type=text],.field textarea,.field select{width:100%;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);color:var(--text);font-size:12px}.field textarea{min-height:60px;resize:vertical}.field input[type=range]{width:100%;accent-color:var(--accent)}.field output{color:var(--accent2);font-variant-numeric:tabular-nums}.color-row{display:flex;gap:6px}.color-row input[type=color]{width:38px;height:35px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}.color-row input[type=text]{flex:1;width:0}.toggle{justify-content:flex-start!important;align-items:center;font-weight:500!important}.toggle input{accent-color:var(--accent)}.hidden{display:none!important}
.preview-panel{display:flex;flex-direction:column;min-height:580px}.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px;border-bottom:1px solid var(--line)}.toolbar strong{font-size:12px}.spacer{flex:1}.preview{display:flex;align-items:center;justify-content:center;flex:1;min-height:480px;max-width:100%;padding:18px;overflow:auto;background:var(--panel2);overscroll-behavior:contain}.empty{max-width:420px;text-align:center;color:var(--muted)}.empty .symbol{font-size:34px;color:var(--accent);letter-spacing:3px}.empty strong{display:block;margin:10px 0;color:var(--text)}.empty p{font-size:12px;line-height:1.6}.ascii-output{width:max-content;max-width:none;flex:none;margin:auto;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:var(--ascii-size,6px);line-height:1.15;letter-spacing:var(--ascii-spacing,0);white-space:pre;overflow:visible}.status{display:flex;justify-content:space-between;gap:10px;padding:10px 13px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}.status span{overflow-wrap:anywhere}.footer{text-align:center;padding:24px 8px;color:var(--muted);font-size:11px}.footer a{color:var(--accent)}.toast{position:fixed;z-index:20;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;max-width:calc(100vw - 28px);padding:12px 17px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);box-shadow:0 12px 35px #0004;font-size:12px;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1180px){.workspace{grid-template-columns:minmax(220px,270px) minmax(0,1fr)}.right-panel{grid-column:1/-1}.right-panel .panel-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.right-panel .panel-body>div{min-width:0}.right-panel .section-label{margin-top:0}}
@media(max-width:760px){.top{height:58px;padding-inline:12px}.brand{font-size:14px}.brand small{font-size:8px}.top-actions{gap:5px}.wrap{padding:12px}.hero{display:block;margin:8px 0 15px}.hero h1{font-size:25px}.hero p{font-size:12px}.pill{display:inline-block;margin-top:10px}.workspace{display:flex;flex-direction:column;gap:12px}.left-panel,.preview-panel,.right-panel{width:100%;order:initial}.left-panel{order:1}.preview-panel{order:2;min-height:390px}.right-panel{order:3}.preview{min-height:300px;justify-content:flex-start;align-items:flex-start}.preview .empty{margin:auto}.toolbar{padding:9px;gap:6px}.toolbar .hint{display:none}.toolbar .btn{font-size:10px;padding:7px 8px}.right-panel .panel-body{display:block}.right-panel .panel-body>div{margin-bottom:16px}.right-panel .section-label{margin-top:18px}.footer{padding:18px 8px}.status{font-size:9px}}
@media(max-width:420px){.top-actions .btn span{display:none}.hero h1{font-size:23px}.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.tab{padding:7px 5px}.toolbar strong{font-size:11px}.toolbar .spacer{display:none}.toolbar .btn{flex:1}.preview{min-height:270px}.field.two{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}