:root{--color-bg: #1e1e2e;--color-surface: #282840;--color-border: #3b3b5c;--color-text: #e0e0e8;--color-text-muted: #8888aa;--color-accent: #7c5cfc;--color-accent-hover: #9b7eff;--font-mono: "Fira Code", "JetBrains Mono", "Cascadia Code", monospace;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--radius: 8px;--gap: 12px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text)}.app{display:grid;grid-template-rows:auto 1fr auto auto;height:100vh;overflow:hidden}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--color-surface);border-bottom:1px solid var(--color-border)}.header h1{font-size:1.25rem;font-weight:700;color:var(--color-text)}.header p{font-size:.75rem;color:var(--color-text-muted);margin-top:2px}.setting-toggle{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--color-text-muted);cursor:pointer;user-select:none}.setting-toggle input[type=checkbox]{accent-color:var(--color-accent)}.main{display:grid;grid-template-columns:1fr auto 1fr;gap:0;padding:var(--gap);overflow:hidden}.panel{display:flex;flex-direction:column;background:var(--color-surface);border-radius:var(--radius);border:1px solid var(--color-border);overflow:hidden}.panel__header{padding:8px 14px;background:var(--color-bg);border-bottom:1px solid var(--color-border)}.panel__header h2{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}.panel__body{flex:1;overflow:hidden;display:flex}.panel-divider{width:var(--gap);cursor:col-resize;display:flex;align-items:center;justify-content:center}.panel-divider:after{content:"";width:3px;height:40px;background:var(--color-border);border-radius:2px}.html-textarea{width:100%;height:100%;resize:none;border:none;outline:none;padding:14px;font-family:var(--font-mono);font-size:.875rem;line-height:1.6;background:var(--color-surface);color:var(--color-text);tab-size:2}.html-textarea::placeholder{color:var(--color-text-muted)}.html-output-frame{width:100%;height:100%;border:none;background:#fff;border-radius:0 0 var(--radius) var(--radius)}.status-bar{display:flex;align-items:center;padding:6px 20px;background:var(--color-surface);border-top:1px solid var(--color-border);font-size:.75rem;color:var(--color-text-muted)}@media(max-width:768px){.main{grid-template-columns:1fr;grid-template-rows:1fr auto 1fr}.panel-divider{width:auto;height:var(--gap);cursor:row-resize}.panel-divider:after{width:40px;height:3px}}.app-footer{border-top:1px solid var(--color-border);background:var(--color-surface);padding:10px 20px}.app-footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}.app-footer__brand,.app-footer__links,.app-footer__trust{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:.75rem;color:var(--color-text-muted)}.app-footer__link{color:var(--color-text-muted);text-decoration:none;background:none;border:none;cursor:pointer;font:inherit;padding:0}.app-footer__link:hover{text-decoration:underline;text-underline-offset:.15em;color:var(--color-text)}.app-footer__separator{color:var(--color-text-muted)}.consent-banner{position:fixed;left:var(--gap);right:var(--gap);bottom:var(--gap);z-index:40;display:grid;gap:10px;padding:12px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);box-shadow:0 10px 30px #00000059;transform:translateY(calc(100% + var(--gap)));opacity:0;transition:transform .22s ease,opacity .16s ease}.consent-banner.is-visible{transform:translateY(0);opacity:1}.consent-banner.is-exiting{transform:translateY(calc(100% + var(--gap)));opacity:0}.consent-banner__text{margin:0;font-size:.8125rem;color:var(--color-text)}.consent-banner__link{justify-self:start;border:none;background:none;color:var(--color-accent);padding:0;cursor:pointer;font-size:.75rem;text-decoration:underline;text-underline-offset:.15em}.consent-banner__actions{display:flex;justify-content:flex-end;gap:8px}.consent-banner__button{border:1px solid var(--color-border);border-radius:calc(var(--radius) - 2px);padding:6px 10px;font-size:.75rem;cursor:pointer}.consent-banner__button--ghost{background:transparent;color:var(--color-text-muted)}.consent-banner__button--primary{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.legal-page{min-height:100vh;display:flex;flex-direction:column;background:var(--color-bg);color:var(--color-text)}.legal-page__header{position:sticky;top:0;z-index:5;border-bottom:1px solid var(--color-border);background:var(--color-surface)}.legal-page__header-inner{max-width:900px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}.legal-page__left{display:flex;align-items:center;gap:12px;min-width:0}.legal-page__back,.legal-page__print{border:1px solid var(--color-border);border-radius:calc(var(--radius) - 2px);background:transparent;color:var(--color-text);padding:6px 10px;font-size:.75rem;cursor:pointer}.legal-page__title{margin:0;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.legal-page__scroll{flex:1;overflow:auto}.legal-page__content{max-width:900px;margin:0 auto;padding:20px;line-height:1.6}.legal-page__content h1,.legal-page__content h2,.legal-page__content h3{margin:1rem 0 .5rem}.legal-page__content p,.legal-page__content ul{margin:.5rem 0}.legal-page__content ul{padding-left:1.2rem}.legal-page__credits-list{list-style:none;padding:0}.legal-page__credit{border:1px solid var(--color-border);border-radius:var(--radius);padding:10px;margin-bottom:10px}.legal-page__license-badge{display:inline-block;font-size:.6875rem;border:1px solid var(--color-border);border-radius:999px;padding:2px 8px;margin-bottom:8px}.modal-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:12px;background:#0000008c;backdrop-filter:blur(3px)}.legal-page[hidden],.modal-backdrop[hidden]{display:none}.modal,.version-modal{width:min(760px,100%);max-height:min(88vh,760px);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}.version-modal__header{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--color-border)}.version-modal__title-wrap h2{margin:0;font-size:1rem}.version-modal__meta{margin:2px 0 0;font-size:.75rem;color:var(--color-text-muted)}.version-modal__close{border:1px solid var(--color-border);border-radius:calc(var(--radius) - 2px);background:transparent;color:var(--color-text);cursor:pointer;width:28px;height:28px;font-size:1rem}.version-modal__body{overflow:auto;padding:14px}.version-modal__heading{margin:0 0 10px;font-size:.9rem;color:var(--color-text-muted)}.version-modal__entry{border:1px solid var(--color-border);border-radius:var(--radius);padding:10px;margin-bottom:10px}.version-modal__entry-header{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}.version-modal__version-badge{font-size:.75rem;background:#7c5cfc33;color:var(--color-text);border:1px solid var(--color-border);border-radius:999px;padding:2px 8px}.version-modal__entry-date{font-size:.75rem;color:var(--color-text-muted)}.version-modal__changes{margin:0;padding-left:1.2rem;font-size:.8125rem;line-height:1.5}