:root { color-scheme: light; --ink:#20242b; --muted:#626a77; --line:#e2e5e9; --surface:#fff; --background:#f7f8fa; --accent:#9b7621; --accent-dark:#765a16; --danger:#b42318; font-family:Raleway,"Segoe UI",system-ui,sans-serif; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--background); }
body { min-height:100vh; margin:0; color:var(--ink); background:var(--background); }
button,input,select { font:inherit; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none!important; }
.app-header { min-height:76px; padding:9px max(22px,calc((100vw - 1200px)/2)); display:flex; justify-content:space-between; align-items:center; gap:18px; background:#fff; border-bottom:1px solid var(--line); }
.brand { display:block; width:min(220px,52vw); }
.brand img { display:block; width:100%; height:auto; }
.app-header nav { display:flex; align-items:center; gap:16px; }
.app-header nav a,.back-link { color:#4f5865; font-size:.9rem; font-weight:700; text-decoration:none; }
.app-header nav a:hover,.back-link:hover { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px; }
.install-button,.primary-button { min-height:40px; padding:8px 14px; color:#fff; background:var(--accent); border:1px solid var(--accent); border-radius:6px; font-weight:750; cursor:pointer; }
.install-button:hover,.primary-button:hover { background:var(--accent-dark); border-color:var(--accent-dark); }
.page { width:min(100% - 40px,1040px); margin:0 auto; padding:24px 0 42px; }
.back-link { display:inline-block; margin-bottom:20px; }
.intro { max-width:760px; margin-bottom:25px; }
.eyebrow { margin:0 0 6px; color:var(--accent-dark); font-size:.7rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:8px; font-family:Cinzel,Georgia,serif; font-size:clamp(2rem,5vw,3rem); line-height:1.15; letter-spacing:-.03em; }
.intro>p:last-child,.panel-title p:last-child { margin-bottom:0; color:var(--muted); line-height:1.6; }
.panel { margin:0 0 17px; padding:clamp(18px,3vw,26px); background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 28px rgb(25 34 48 / 4%); }
.panel-title { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:20px; }
.panel-title h2 { margin-bottom:6px; font-size:1.32rem; }
.panel-title p:last-child { font-size:.87rem; }
.section-mark { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; color:var(--accent); background:#f4f1e9; border-radius:11px; font-size:1.1rem; font-weight:800; }
.form-grid { display:grid; gap:12px; align-items:end; }
.scale-controls { grid-template-columns:repeat(4,minmax(0,1fr)); }
.text-controls { grid-template-columns:minmax(0,1fr) 145px 190px; margin-bottom:13px; }
.aspect-controls { grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) minmax(190px,1.2fr); }
.target-controls { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:13px; }
.field { min-width:0; display:grid; gap:6px; }
.field>span { color:#4c5562; font-size:.8rem; font-weight:750; }
.field input,.field select { width:100%; min-width:0; min-height:40px; padding:8px 10px; color:var(--ink); background:#fff; border:1px solid #cbd1d9; border-radius:6px; }
.input-unit { display:flex; align-items:center; gap:8px; }
.input-unit input { flex:1; }
.input-unit>span { color:var(--muted); font-size:.83rem; }
.custom-ratio-field { grid-column:3; }
.table-scroll { margin-top:18px; overflow-x:auto; }
.scale-table { width:100%; border-collapse:collapse; text-align:left; }
.scale-table th { padding:9px 10px; color:#586271; background:#f7f8fa; border-bottom:1px solid var(--line); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.scale-table td { height:51px; padding:7px 10px; border-bottom:1px solid #eef0f2; font-variant-numeric:tabular-nums; }
.scale-table tbody tr:last-child td { border-bottom:0; }
.scale-table .step-label { color:var(--muted); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.82rem; }
.scale-table .role-label { font-weight:700; }
.scale-table .numeric { color:#4f5865; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.82rem; white-space:nowrap; }
.scale-table .preview-cell { min-width:130px; overflow:hidden; white-space:nowrap; }
.note { margin:12px 0 0; color:var(--muted); font-size:.74rem; line-height:1.5; }
.text-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.secondary-button { min-height:38px; padding:7px 12px; color:#3e4753; background:#fff; border:1px solid #cbd1d9; border-radius:6px; font-size:.82rem; font-weight:700; cursor:pointer; }
.secondary-button:hover { background:#f4f1e9; border-color:#c5b47f; }
.status { color:var(--muted); font-size:.78rem; }
.generated-copy { max-height:390px; margin-top:15px; padding:15px; overflow:auto; color:#414854; background:#fafbfc; border:1px solid var(--line); border-radius:7px; line-height:1.68; }
.generated-copy p:last-child { margin-bottom:0; }
.aspect-controls .multiply { padding-bottom:10px; color:var(--muted); text-align:center; font-size:1.2rem; }
.aspect-results { margin-top:17px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.aspect-results>div { min-width:0; padding:12px; display:grid; gap:5px; background:#fafbfc; border:1px solid var(--line); border-radius:7px; }
.aspect-results span { color:var(--muted); font-size:.73rem; }
.aspect-results strong { overflow-wrap:anywhere; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.privacy-note { margin:20px 0 0; color:var(--muted); text-align:center; font-size:.79rem; }
.toast { position:fixed; right:18px; bottom:max(18px,env(safe-area-inset-bottom)); z-index:5; max-width:calc(100vw - 36px); padding:11px 15px; color:#fff; background:#252b34; border-radius:7px; box-shadow:0 8px 24px rgb(0 0 0 / 20%); font-size:.85rem; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .15s ease,transform .15s ease; }
.toast.visible { opacity:1; transform:translateY(0); }
@media(max-width:760px) { .scale-controls{grid-template-columns:repeat(2,minmax(0,1fr));}.custom-ratio-field{grid-column:auto;}.text-controls{grid-template-columns:repeat(2,minmax(0,1fr));}.text-controls .field:first-child{grid-column:1/-1;}.aspect-controls{grid-template-columns:1fr 18px 1fr;}.aspect-controls .field:last-child{grid-column:1/-1;}.aspect-results{grid-template-columns:1fr 1fr;}.aspect-results>div:last-child{grid-column:1/-1;} }
@media(max-width:520px) { .app-header{min-height:65px;padding:8px 13px;gap:7px;}.brand{width:min(165px,45vw);}.app-header nav{gap:9px;}.app-header nav a{font-size:.78rem;}.install-button{min-height:36px;padding:6px 8px;font-size:.76rem;white-space:nowrap;}.page{width:min(100% - 26px,1040px);padding-top:17px;}.scale-controls,.text-controls{grid-template-columns:1fr 1fr;}.scale-table th,.scale-table td{padding-inline:6px;}.scale-table th{font-size:.63rem;}.scale-table .numeric{font-size:.7rem;}.scale-table .preview-cell{min-width:105px;}.aspect-results{grid-template-columns:1fr 1fr;} }