:root{--bg:#f4ecdf;--bg-strong:#e7d7bc;--paper:#fffbf6db;--paper-line:#825a361f;--ink:#32231d;--muted:#735d52;--accent:#b3202a;--accent-deep:#7e1520;--warning:#a44e1a;--shadow:0 18px 50px #5f381d1f;--font-ui:"Avenir Next", "Hiragino Sans", "Yu Gothic", sans-serif;--font-display:"Iowan Old Style", "Hiragino Mincho ProN", "Yu Mincho", serif}*{box-sizing:border-box}html{background:radial-gradient(circle at 0 0,#e3b18447,#0000 28%),radial-gradient(circle at 100% 100%,#b3202a1f,#0000 32%),linear-gradient(135deg,#f7f1e7,#f0e2cb 58%,#e8d7bc);min-height:100%}body{min-height:100vh;color:var(--ink);font-family:var(--font-ui);margin:0}button,textarea{font:inherit}.page-shell{width:min(1200px,100% - 32px);margin:0 auto;padding:48px 0 56px}.hero{margin-bottom:28px}.eyebrow{color:var(--accent-deep);letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px;font-size:.82rem;font-weight:700}.hero h1{max-width:12ch;font-family:var(--font-display);margin:0;font-size:clamp(2.4rem,5vw,4.6rem);line-height:.94}.hero-copy{max-width:56ch;color:var(--muted);margin:14px 0 0;line-height:1.7}.workspace{grid-template-columns:minmax(320px,420px) minmax(320px,1fr);gap:22px;display:grid}.panel{border:1px solid var(--paper-line);background:var(--paper);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);border-radius:28px;position:relative;overflow:hidden}.panel:before{content:"";pointer-events:none;background:linear-gradient(#ffffff7a,#0000 32%),repeating-linear-gradient(135deg,#0000 0 14px,#825a3605 14px 28px);position:absolute;inset:0}.controls,.preview-panel{padding:24px}.controls{flex-direction:column;gap:18px;display:flex}.field,.field-group{border:0;flex-direction:column;gap:10px;margin:0;padding:0;display:flex}.field>span,.field-group>legend,.field-inline>span{color:var(--muted);padding:0;font-size:.9rem;font-weight:700}.field textarea{resize:vertical;min-height:104px;color:var(--ink);background:#ffffffb8;border:1px solid #825a3629;border-radius:18px;outline:none;padding:16px 18px;font-size:1.15rem;line-height:1.5}.field textarea:focus{border-color:#b3202a6b;box-shadow:0 0 0 4px #b3202a14}.field-inline{justify-content:space-between;align-items:center;gap:12px;display:flex}.field-inline strong{font-size:.92rem}.segmented{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px;display:grid}.segmented button,.download-button{cursor:pointer;border:0;border-radius:16px;transition:transform .18s,background-color .18s,opacity .18s}.segmented button{color:var(--ink);background:#ffffffb8;padding:13px 14px;font-weight:700}.segmented button.active{background:var(--accent);color:#fff}.segmented button:disabled{cursor:not-allowed;opacity:.42}.segmented button:not(:disabled):hover,.download-button:hover:not(:disabled){transform:translateY(-1px)}.message-stack{flex-direction:column;gap:8px;display:flex}.hint,.warning{margin:0;font-size:.9rem;line-height:1.5}.hint{color:var(--muted)}.warning{color:var(--warning);font-weight:700}.download-button{background:linear-gradient(135deg, var(--accent), var(--accent-deep));color:#fff;padding:16px 18px;font-weight:800}.download-button:disabled{cursor:not-allowed;opacity:.46}.preview-panel{flex-direction:column;gap:18px;display:flex}.preview-meta{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.preview-meta span{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:.88rem}.preview-stage{background:linear-gradient(135deg,#ffffffa3,#f5e9d6b8),radial-gradient(circle,#b3202a14,#0000 56%);border-radius:24px;place-items:center;min-height:520px;display:grid;position:relative}.preview-grid{background-image:linear-gradient(#825a360f 1px,#0000 1px),linear-gradient(90deg,#825a360f 1px,#0000 1px);background-size:32px 32px;border-radius:20px;position:absolute;inset:18px}.preview-stage canvas{aspect-ratio:1;width:min(100%,512px);height:auto;position:relative}@media (max-width:920px){.workspace{grid-template-columns:1fr}.hero h1{max-width:10ch}.preview-stage{min-height:420px}}@media (max-width:560px){.page-shell{width:min(100% - 20px,100%);padding-top:28px}.controls,.preview-panel{padding:18px}.hero h1{font-size:clamp(2rem,10vw,3rem)}.preview-stage{min-height:320px}}