:root{color-scheme:light;--ink:#332a38;--muted:#746e79;--rose:#c85c80;--cream:#fffaf5;--line:#eedee6;--panel:#fffefc}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:linear-gradient(160deg,#fff7f9,#fffaf2 48%,#f8f6ff);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:#ad4772;text-underline-offset:3px}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #bd78b6;outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:6px;z-index:20;padding:10px;background:white}.skip-link:focus{left:8px}
.mini-header{background:#fff9fbde;border-bottom:1px solid #f0e5eb;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px max(20px,calc((100vw - 1060px)/2));min-height:66px}
.mini-brand{white-space:nowrap;text-decoration:none;font-weight:900;color:#332b3b;font-size:20px;letter-spacing:-.7px}.mini-brand span{color:#cc5d89}
.mini-brand{display:inline-flex;align-items:center;gap:5px}.mini-brand img{display:block;flex:0 0 26px}
.mini-header nav,.mini-footer nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.mini-header nav a,.mini-footer nav a{font-size:13px;font-weight:650;text-decoration:none;color:#765b73}
.mini-header nav a:hover,.mini-header nav a.current{color:#b74979}
main{max-width:1080px;margin:0 auto;padding:0 18px}
.intro{text-align:center;padding:44px 10px 25px}.intro-label{font-size:11px;font-weight:800;letter-spacing:1.7px;color:#b05f8e}
.intro h1{font:700 clamp(36px,6vw,56px)/1.13 Georgia,serif;margin:10px 0 12px}.intro h1 em{color:#c76384;font-weight:700}
.intro p{margin:0 auto;max-width:620px;line-height:1.6;color:var(--muted);font-size:15px}
.value-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:21px}.value-pills span{background:#fff8fc;border:1px solid #eddfe8;border-radius:30px;padding:8px 12px;font-size:12px;color:#8e647d;font-weight:750}
.tool-card{border:1px solid var(--line);background:var(--panel);border-radius:22px;box-shadow:0 15px 45px #8f587618;overflow:hidden}
.mode-picker{display:flex;gap:8px;background:#fff8fb;padding:14px;border-bottom:1px solid var(--line)}
.mode-picker button{border:1px solid transparent;border-radius:11px;background:transparent;color:#795e78;font-size:13px;font-weight:750;padding:11px 16px}
.mode-picker button.active{background:#fff;border-color:#ebd9e5;box-shadow:0 3px 10px #84546c13;color:#b44877}
.tool-layout{display:grid;grid-template-columns:minmax(235px,340px) minmax(0,1fr);gap:24px;padding:22px}
.controls{border-right:1px solid #f1e6eb;padding-right:22px}
.controls label{display:block;font-size:13px;font-weight:800;margin-bottom:8px}
.controls textarea,.controls input[type=file],.controls select{width:100%;border:1px solid #e7dae2;border-radius:10px;background:white;padding:11px;color:var(--ink)}
.controls textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;resize:vertical;min-height:98px;max-height:180px;font-size:17px}
.field{margin-top:24px}.field-help{font-size:12px;color:#847984;line-height:1.5;margin:8px 0 0}
.controls input[type=range]{width:100%;accent-color:#c55f86}
.privacy-promise{font-size:12px;color:#8e7282;line-height:1.55;border-radius:10px;background:#fff5fa;padding:12px;margin-top:26px}
.tool-status{margin-top:15px;background:#fff0e4;border:1px solid #e9d4c3;color:#7a5340;padding:10px;border-radius:9px;font-size:12px;line-height:1.4}.tool-status[hidden]{display:none}
.output-panel{min-width:0}.output-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.output-heading h2{font:700 23px Georgia,serif;margin:3px 0 12px}.output-heading span{color:#a58398;font-size:11px}
#asciiResult{background:#211e2b;color:#e9fce9;border:1px solid #342b3a;border-radius:14px;line-height:1.13;letter-spacing:0;min-height:225px;max-height:430px;overflow:auto;margin:0;padding:17px;white-space:pre;font:12px/1.18 ui-monospace,"SFMono-Regular",Consolas,monospace;tab-size:4}
.output-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.output-actions button{font-size:12px;font-weight:750;padding:11px 12px;min-height:42px;border-radius:10px;border:1px solid #ecdde6;background:white;color:#795a6e}
.output-actions button.primary-action{background:#ca6387;color:#fff;border-color:#ca6387}.output-actions button:disabled{cursor:not-allowed;opacity:.55}
.output-help{font-size:12px;line-height:1.5;color:#817586;margin-bottom:0}
.guide{padding:37px 0 60px}.guide h2{text-align:center;font:700 28px Georgia,serif;margin:0 0 21px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.guide-grid article{border:1px solid #f0e2eb;background:#ffffffb8;border-radius:14px;padding:18px}.guide-grid strong{font-size:15px}.guide-grid p{font-size:13px;color:#786e7a;line-height:1.55;margin:8px 0 0}
.guide .hint{font-size:13px;color:#716676;text-align:center;line-height:1.6;margin-top:24px}
.mini-footer{background:#fffafc;border-top:1px solid #f0e2e9;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:20px max(20px,calc((100vw - 1060px)/2));font-size:12px;color:#65576a}
@media(max-width:760px){.tool-layout{grid-template-columns:1fr;gap:17px;padding:16px}.controls{border-right:0;padding-right:0;border-bottom:1px solid #f1e6eb;padding-bottom:16px}.intro{padding:28px 8px 18px}.intro p{font-size:13px}.guide-grid{grid-template-columns:1fr}.mini-header{flex-wrap:wrap;padding:12px 15px}.mini-header nav{gap:14px}.mini-header nav a{font-size:12px}.mini-footer{padding:20px 16px;flex-wrap:wrap}}
@media(max-width:390px){.intro h1{font-size:35px}.value-pills{gap:5px}.value-pills span{font-size:10px;padding:7px 8px}.output-actions button{flex:1}.mode-picker button{padding:11px 9px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}