:root{--page-bg:#f8f9ff;--surface:#fff;--surface-soft:#fbfbff;--text:#111827;--muted:#667085;--line:#e4e7ec;--accent:#7c3aed;--accent-2:#c084fc;--accent-soft:#f3e8ff;--success:#16a34a;--warning:#f59e0b;--shadow:0 20px 55px #11182714;--shadow-soft:0 14px 32px #1118270f;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono:"JetBrains Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;color:var(--text);background:var(--page-bg);font-family:var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0}button,input,select,textarea{font:inherit}button,select,input[type=color]{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:2px;outline:3px solid #7c3aed40}svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.9px;width:20px;height:20px;display:block}#app{min-height:100svh}.app-shell{background:radial-gradient(circle at 32% 0%, #7c3aed14, transparent 30rem), linear-gradient(180deg, #fff 0, var(--page-bg) 100%);min-height:100svh;color:var(--text);transition:background-color .18s,color .18s}.app-shell.dark-mode{--page-bg:#0b1020;--surface:#101827;--surface-soft:#111a2d;--text:#f8fafc;--muted:#b6c0d4;--line:#263148;--accent:#a78bfa;--accent-2:#d8b4fe;--accent-soft:#a78bfa24;--shadow:0 24px 70px #0000005c;--shadow-soft:0 18px 38px #00000047;background:radial-gradient(circle at 32% 0%, #a78bfa2e, transparent 30rem), linear-gradient(180deg, #0f172a 0, var(--page-bg) 100%)}.topbar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:10;background:#ffffffd1;justify-content:space-between;align-items:center;gap:18px;min-height:82px;padding:18px 30px;display:flex;position:sticky;top:0;box-shadow:0 8px 28px #1118270d}.dark-mode .topbar{background:#101827d1}.brand{color:var(--text);align-items:center;gap:18px;font-size:26px;font-weight:800;display:inline-flex}.brand-mark{border:4px solid var(--accent);width:44px;height:44px;color:var(--accent);border-radius:8px;place-items:center;font-size:28px;font-weight:900;line-height:1;display:grid;box-shadow:inset 0 0 0 2px #c084fc59}.topbar-actions{justify-content:flex-end;align-items:center;gap:14px;display:flex}.language-select{border:1px solid var(--line);background:var(--surface);min-height:44px;color:var(--text);border-radius:8px;grid-template-columns:20px minmax(120px,1fr);align-items:center;gap:10px;padding:0 12px 0 14px;transition:border-color .18s,box-shadow .18s,color .18s;display:inline-grid}.language-select:hover,.language-select:focus-within{color:var(--accent);box-shadow:var(--shadow-soft);border-color:#7c3aed73}.language-select svg{color:currentColor;width:20px;height:20px}.language-select select{width:100%;min-width:0;min-height:42px;color:var(--text);background-color:#0000;border:0;outline:0;padding:0 28px 0 0;font-weight:600}.ghost-button,.mini-button,.icon-button,.choice-button,.primary-action,.secondary-action{border:1px solid var(--line);background:var(--surface);color:var(--text);transition:border-color .18s,box-shadow .18s,background .18s,color .18s}.ghost-button{border-radius:8px;align-items:center;gap:10px;min-height:44px;padding:0 18px;font-weight:600;display:inline-flex}.ghost-button:hover,.ghost-button.active{color:var(--accent);box-shadow:var(--shadow-soft);border-color:#7c3aed73}.workspace{grid-template-columns:minmax(320px,528px) minmax(0,1fr);gap:30px;width:min(100%,1500px);margin:0 auto;padding:32px 30px 42px;display:grid}.control-panel,.preview-card,.tip,.pro-tip{background:color-mix(in srgb, var(--surface) 96%, transparent);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px}.control-panel{padding:22px 20px 34px}.tabs{border-bottom:1px solid var(--line);align-items:center;gap:24px;margin-bottom:26px;display:flex}.tab{color:#60677a;background:0 0;border:0;border-bottom:3px solid #0000;align-items:center;gap:10px;min-height:42px;padding:0 16px 14px;font-weight:700;display:inline-flex}.tab span{font-size:22px;font-weight:900}.tab.active{border-bottom-color:var(--accent);color:var(--accent)}.field-label{color:var(--text);margin:24px 0 10px;font-size:16px;font-weight:800;display:block}textarea{resize:vertical;border:1.5px solid var(--accent);background:var(--surface);width:100%;min-height:140px;color:var(--text);border-radius:9px;padding:16px;font-size:23px;line-height:1.45}.textarea-meta{color:var(--muted);justify-content:space-between;align-items:center;gap:12px;margin-top:8px;font-size:14px;display:flex}.mini-button{background:var(--surface);border-radius:8px;align-items:center;gap:8px;min-height:40px;padding:0 16px;display:inline-flex}.mini-button:hover,.choice-button:hover,.secondary-action:hover{box-shadow:var(--shadow-soft);border-color:#7c3aed6b}.font-select-wrap{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;display:grid}.font-select{width:100%;min-height:50px;color:var(--text);border-color:#7c3aed80;font-weight:700}.font-select:hover{border-color:var(--accent);box-shadow:var(--shadow-soft)}.font-select-wrap span{background:var(--accent-soft);min-height:36px;color:var(--accent);white-space:nowrap;border:1px solid #7c3aed33;border-radius:8px;align-items:center;padding:0 12px;font-size:13px;font-weight:800;display:inline-flex}.range-row{grid-template-columns:1fr 84px;align-items:center;gap:20px;display:grid}input[type=range]{width:100%;accent-color:var(--accent)}output{border:1px solid var(--line);background:var(--surface);min-height:40px;color:var(--text);border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:0 12px;display:inline-flex}output span{color:var(--muted);font-size:14px}.color-input{border:1px solid var(--line);background:var(--surface);border-radius:8px;grid-template-columns:30px 1fr;align-items:center;gap:12px;min-height:44px;padding:7px 10px;display:grid}.color-input input[type=color]{background:0 0;border:0;border-radius:5px;width:26px;height:26px;padding:0}.color-input input[type=text]{width:100%;color:var(--text);background:0 0;border:0;outline:0}.background-row{grid-template-columns:1fr 1fr minmax(140px,1fr);gap:10px;display:grid}.choice-button{background:var(--surface);border-radius:8px;justify-content:center;align-items:center;gap:9px;min-height:50px;font-weight:600;display:inline-flex}.choice-button.selected{border-color:var(--accent);color:var(--accent)}.checker{background:linear-gradient(45deg, var(--accent) 25%, transparent 25%), linear-gradient(-45deg, var(--accent) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--accent) 75%), linear-gradient(-45deg, transparent 75%, var(--accent) 75%);background-color:#fff;background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;border-radius:3px;width:17px;height:17px}.compact{grid-template-columns:28px minmax(0,1fr)}.tip,.pro-tip{box-shadow:none;color:#5f6575;background:#fffbeba8;border-color:#f59e0b47;align-items:center;gap:10px;margin:24px 0 0;padding:16px;font-size:14px;display:flex}.dark-mode .tip{color:var(--muted);background:#f59e0b1a}.tip svg{color:var(--warning);flex:none}.result-area{min-width:0}.preview-card{overflow:hidden}.preview-card:fullscreen{background:var(--surface);border-radius:0;grid-template-rows:auto minmax(0,1fr);width:100vw;height:100vh;display:grid}.preview-card:fullscreen .preview-canvas{height:100%;min-height:0}.preview-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;min-height:72px;padding:16px 20px;display:flex}.preview-title{align-items:center;gap:16px;display:flex}.preview-title h1{color:var(--text);margin:0;font-size:18px;font-weight:900}.preview-title span{color:var(--success);background:#dff7e9;border-radius:8px;padding:5px 11px;font-size:13px;font-weight:700}.preview-tools{align-items:center;gap:14px;display:flex}select{border:1px solid var(--line);background:var(--surface);min-width:168px;min-height:40px;color:var(--text);border-radius:8px;padding:0 42px 0 16px}.icon-button{width:40px;height:40px;color:var(--text);background:0 0;border:0;place-items:center;display:grid}.icon-button:hover{color:var(--accent)}.preview-canvas{background-image:linear-gradient(45deg,#7c3aed09 25%,#0000 25%),linear-gradient(-45deg,#7c3aed09 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#7c3aed09 75%),linear-gradient(-45deg,#0000 75%,#7c3aed09 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px;justify-content:center;align-items:center;min-height:560px;padding:64px;display:flex;overflow:auto}.preview-canvas.fit-mode{overflow:hidden}.preview-canvas:not(.fit-mode){justify-content:flex-start}.preview-canvas pre{max-width:none;font-family:var(--mono);letter-spacing:0;white-space:pre;text-align:left;margin:0;font-weight:900;line-height:.82;transition:transform .18s}.preview-canvas pre.fitted{transform-origin:50%;font-size:inherit}.state-text{color:var(--muted);font-weight:700}.download-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px;display:grid}.primary-action,.secondary-action{text-align:left;border-radius:8px;justify-content:center;align-items:center;gap:10px;width:100%;min-height:66px;padding:12px 14px;display:flex}.copy-action-wrap{position:relative}.copy-toast{color:#fff;box-shadow:var(--shadow-soft);white-space:nowrap;z-index:3;background:#111827;border-radius:8px;margin:0;padding:9px 14px;font-size:14px;font-weight:800;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%)}.copy-toast:after{content:"";border:6px solid #0000;border-top-color:#111827;position:absolute;top:100%;left:50%;transform:translate(-50%)}.primary-action{color:#fff;background:linear-gradient(135deg,#673eea 0%,#bf6be9 100%);border-color:#0000;box-shadow:0 18px 36px #7c3aed47}.primary-action:hover{box-shadow:0 22px 46px #7c3aed5c}.secondary-action{background:var(--surface)}.secondary-action svg{color:var(--accent)}.primary-action span,.secondary-action span{gap:2px;display:grid}.primary-action strong,.secondary-action strong{font-size:14px;line-height:1.2}.primary-action small,.secondary-action small{color:currentColor;opacity:.72;font-size:12px}.pro-tip{color:var(--accent);background:linear-gradient(90deg,#7c3aed14,#c084fc0f);border-color:#7c3aed2e;margin-top:26px}.pro-tip svg{color:var(--accent);flex:none}.faq-section{width:min(100%,1500px);margin:0 auto;padding:18px 30px 78px}.faq-section h2{color:var(--text);text-align:center;margin:0 0 40px;font-size:30px;line-height:1.2}.faq-list{gap:20px;width:min(100%,1126px);margin:0 auto;display:grid}.faq-item{border:1px solid var(--line);background:var(--surface);border-radius:8px;overflow:hidden;box-shadow:0 10px 28px #1118270a}.faq-item summary{color:#2563eb;cursor:pointer;justify-content:space-between;align-items:center;gap:18px;min-height:72px;padding:26px;font-size:24px;font-weight:900;list-style:none;display:flex}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary svg{color:currentColor;flex:none;transition:transform .18s}.faq-item[open] summary svg{transform:rotate(180deg)}.faq-item p{color:#344861;margin:0;padding:0 26px 28px;font-size:20px;line-height:1.6}.dark-mode .faq-item p{color:var(--muted)}.site-footer{color:#5c7494;text-align:center;background:#eef3f8;justify-items:center;gap:22px;padding:38px 18px 26px;display:grid}.dark-mode .site-footer{color:var(--muted);background:#0f172a}.site-footer p{margin:0;font-size:20px;line-height:1.4}.site-footer nav{color:#49627f;justify-content:center;align-items:center;gap:20px;font-size:20px;line-height:1.4;display:flex}.site-footer a{color:#1f5eff;text-decoration:none}.site-footer a:hover{text-decoration:underline}.modal-backdrop{z-index:50;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172a7a;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.policy-modal{border:1px solid var(--line);background:var(--surface);border-radius:8px;grid-template-rows:auto minmax(0,1fr);width:min(100%,860px);max-height:min(82svh,760px);display:grid;overflow:hidden;box-shadow:0 30px 90px #0f172a47}.policy-modal-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;min-height:68px;padding:18px 22px;display:flex}.policy-modal-header h2{color:var(--text);margin:0;font-size:22px;line-height:1.2}.modal-close{border:1px solid var(--line);background:var(--surface);width:40px;height:40px;color:var(--text);border-radius:8px;place-items:center;transition:border-color .18s,color .18s,box-shadow .18s;display:grid}.modal-close:hover{color:var(--accent);box-shadow:var(--shadow-soft);border-color:#7c3aed6b}.policy-modal-body{padding:22px;overflow:auto}.policy-modal-body pre{color:#344861;font-family:var(--sans);white-space:pre-wrap;margin:0;font-size:16px;line-height:1.7}.dark-mode .policy-modal-body pre{color:var(--muted)}@media (width<=1180px){.workspace{grid-template-columns:1fr}.control-panel{order:2}.result-area{order:1}}@media (width<=760px){.topbar{flex-direction:column;align-items:flex-start;padding:16px;position:static}.brand{gap:12px;font-size:22px}.topbar-actions,.background-row{grid-template-columns:1fr;width:100%}.topbar-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.ghost-button{justify-content:center;width:100%;padding:0 10px}.language-select{grid-column:1/-1;width:100%}.workspace{gap:18px;padding:18px 14px 28px}.faq-section{padding:8px 14px 46px}.faq-section h2{margin-bottom:24px;font-size:24px}.faq-list{gap:14px}.faq-item summary{min-height:60px;padding:18px;font-size:18px}.faq-item p{padding:0 18px 20px;font-size:16px}.site-footer{gap:16px;padding:30px 14px 24px}.site-footer p,.site-footer nav{font-size:16px}.modal-backdrop{padding:14px}.policy-modal{max-height:86svh}.policy-modal-header,.policy-modal-body{padding:16px}.control-panel{padding:18px 14px 24px}.font-select-wrap{grid-template-columns:1fr}.preview-header{flex-direction:column;align-items:flex-start}.preview-tools{justify-content:space-between;width:100%}.preview-canvas{justify-content:flex-start;min-height:360px;padding:26px 18px}.download-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}