/* Tarantino — responsive, dependency-free interface */
:root { color-scheme: light; --bg:#f5f3ed; --surface:#fffefa; --surface-soft:#efede6; --text:#24251f; --muted:#6b6b61; --border:#dcdad1; --accent:#ead16a; --accent-hover:#f2db7e; --accent-ink:#292819; --focus:#807019; --error:#a8392b; --warning-bg:#f5efda; --warning-ink:#6b552a; --shadow:0 6px 22px #302f1b05; --logo-filter:none; --track:#d9d7cc; --rule:#e7e5dc; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#181a17; --surface:#22251f; --surface-soft:#2b2e27; --text:#eeeede; --muted:#b0b2a4; --border:#41453a; --accent:#dcca73; --accent-hover:#efdb84; --accent-ink:#222419; --focus:#e6d584; --error:#ffa091; --warning-bg:#343023; --warning-ink:#e8d5a3; --shadow:none; --logo-filter:invert(94%) sepia(9%) saturate(270%) hue-rotate(14deg); --track:#4b5043; --rule:#373b31; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button,select { color:var(--text); }
button { border:0; }
a { color:inherit; }
button:disabled { cursor:wait; opacity:.65; }
:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-70px; left:16px; z-index:20; background:var(--accent); color:var(--accent-ink); padding:12px 20px; border-radius:8px; }
.skip-link:focus { top:12px; }
.site-header { max-width:1440px; margin:auto; padding:28px 56px; display:flex; align-items:center; gap:28px; border-bottom:1px solid var(--border); }
.brand { display:flex; flex-shrink:0; align-items:center; }
.brand img { width:204px; height:auto; filter:var(--logo-filter); }
.header-caption { border-left:1px solid var(--border); padding-left:26px; color:var(--muted); font-size:12px; }
.header-actions { display:flex; align-items:center; gap:26px; margin-left:auto; }
.text-button { padding:4px 0; background:none; font-size:12px; color:var(--muted); text-underline-offset:4px; }
.text-button:hover { color:var(--text); text-decoration:underline; }
.how-button { color:var(--text); }
.how-button span { margin-left:8px; }
.theme-switch { display:flex; gap:7px; align-items:center; }
.theme-symbol { font-size:21px; line-height:1; }
.theme-switch select { width:112px; padding:8px 2px; font-size:12px; background:transparent; border:0; cursor:pointer; }
.theme-switch select option { background:var(--surface); }
.page { max-width:1240px; margin:0 auto; padding:0 36px; }
.hero { padding:56px 0 35px; }
.eyebrow { font-size:10px; letter-spacing:1.5px; font-weight:650; color:var(--muted); }
.hero .eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:18px; }
.small-dot { width:6px; height:6px; background:var(--text); border-radius:50%; }
h1 { font-size:clamp(42px,5.2vw,70px); line-height:1.08; letter-spacing:-3px; font-weight:480; margin:0; }
h1 em { font-family:Georgia,"Times New Roman",serif; font-weight:400; position:relative; }
h1 em::after { content:""; position:absolute; left:0; bottom:3px; width:100%; height:8px; background:var(--accent); z-index:-1; transform:rotate(-1deg); }
.hero-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-top:23px; }
.hero-bottom p { margin:0; color:var(--muted); font-size:15px; line-height:1.75; }
.hero-note { font-family:Georgia,serif; font-style:italic; font-size:17px; color:var(--muted); padding-bottom:4px; }
.workspace { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr); align-items:start; gap:26px; }
#builder,.result-column { min-width:0; }
.card { border:1px solid var(--border); border-radius:16px; padding:27px 28px 28px; background:var(--surface); margin-bottom:18px; box-shadow:var(--shadow); }
.section-heading { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.step-number { width:28px; height:28px; border-radius:50%; border:1px solid var(--border); color:var(--muted); font:11px/26px ui-monospace,monospace; text-align:center; flex-shrink:0; }
h2 { margin:0; font-size:19px; font-weight:600; letter-spacing:-.45px; line-height:1.3; }
.section-meta { margin-left:auto; font:10px/1.4 ui-monospace,monospace; color:var(--muted); }
.field { margin-bottom:20px; min-width:0; }
.field:last-child { margin-bottom:0; }
.field label,.address-field legend,.source-types legend { display:block; margin-bottom:8px; font-size:12px; font-weight:600; }
.label-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.counter { color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.required { color:var(--muted); }
.optional { font-weight:400; color:var(--muted); margin-left:6px; font-size:11px; }
textarea, .field select { display:block; width:100%; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); padding:12px 13px; outline-offset:2px; }
textarea { resize:vertical; min-height:76px; line-height:1.65; font-size:13px; }
#topic { min-height:133px; }
textarea::placeholder { color:var(--muted); opacity:.85; }
textarea:focus,.field select:focus { border-color:var(--focus); }
.field select { min-height:44px; padding-right:30px; font-size:12px; text-overflow:ellipsis; cursor:pointer; }
.field select option { background:var(--surface); }
.field-hint { color:var(--muted); font-size:11px; line-height:1.65; margin:8px 0 0; }
.field-error { font-size:12px; color:var(--error); margin:8px 0; }
[aria-invalid="true"] { border-color:var(--error); }
.field-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:16px; }
.field-grid .field:nth-last-child(-n+2) { margin-bottom:0; }
.check-panel { display:flex; gap:12px; padding:16px; border:1px solid var(--border); border-radius:9px; cursor:pointer; align-items:flex-start; background:var(--surface-soft); }
.check-panel input { margin:3px 0 0; width:17px; height:17px; flex-shrink:0; accent-color:var(--focus); }
.check-panel strong { display:block; font-weight:550; font-size:13px; margin-bottom:5px; }
.check-panel span span { display:block; font-size:11px; color:var(--muted); line-height:1.65; }
.source-field { margin-top:20px; }
.inline-note { display:flex; align-items:flex-start; gap:10px; color:var(--muted); }
.inline-note>span { font-size:19px; line-height:1.25; }
.inline-note p { margin:0; font-size:11px; line-height:1.7; }
.source-types { padding:0; margin:0 0 18px; border:0; display:flex; flex-wrap:wrap; gap:7px; }
.source-types legend { margin-bottom:10px; }
.check-chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:7px 9px; background:var(--surface-soft); border:1px solid var(--border); border-radius:6px; cursor:pointer; }
.check-chip input { accent-color:var(--focus); margin:0; width:13px; height:13px; }
.section-description { font-size:12px; color:var(--muted); margin:-10px 0 16px; }
.presets { display:flex; flex-wrap:wrap; gap:7px; }
.preset { border:1px solid var(--border); border-radius:6px; font-size:11px; background:var(--surface); color:var(--muted); padding:8px 11px; min-height:36px; }
.preset:hover { border-color:var(--muted); color:var(--text); }
.preset[aria-pressed="true"] { background:var(--text); border-color:var(--text); color:var(--surface); }
.preset-caption { color:var(--muted); font-size:10px; margin:10px 0 23px; }
.address-field { border:0; padding:0 0 25px; margin:0; }
.segmented { display:flex; background:var(--surface-soft); border:1px solid var(--border); padding:4px; border-radius:8px; gap:4px; }
.segmented label { flex:1; cursor:pointer; position:relative; }
.segmented input { position:absolute; opacity:0; width:1px; height:1px; }
.segmented span { display:block; border-radius:5px; text-align:center; padding:8px 4px; color:var(--muted); font-size:12px; }
.segmented input:checked+span { background:var(--surface); color:var(--text); box-shadow:0 1px 4px #0000000d; }
.segmented input:focus-visible+span { outline:3px solid var(--focus); outline-offset:2px; }
.slider-row { padding:24px 0 21px; border-top:1px solid var(--rule); }
.slider-top { display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom:15px; }
.slider-top label { font-size:13px; font-weight:550; }
.slider-value { font-size:10px; color:var(--muted); padding:3px 8px; background:var(--surface-soft); border-radius:4px; text-align:right; }
.range-wrap { position:relative; }
.range-dots { position:absolute; inset:0 10px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.range-dots i { width:5px; height:5px; background:var(--surface); border-radius:50%; opacity:.85; }
input[type="range"] { --progress:50%; width:100%; display:block; margin:0; height:28px; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; position:relative; z-index:1; }
input[type="range"]::-webkit-slider-runnable-track { height:4px; border-radius:10px; background:linear-gradient(to right,var(--text) 0%,var(--text) var(--progress),var(--track) var(--progress),var(--track) 100%); }
input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:19px; height:19px; border-radius:50%; background:var(--text); border:4px solid var(--surface); box-shadow:0 0 0 1px var(--text); margin-top:-7.5px; }
input[type="range"]::-moz-range-track { height:4px; border-radius:10px; background:var(--track); }
input[type="range"]::-moz-range-progress { background:var(--text); height:4px; }
input[type="range"]::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:var(--text); border:4px solid var(--surface); box-shadow:0 0 0 1px var(--text); }
.range-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; margin-top:3px; }
.slider-hint { font-size:11px; color:var(--muted); margin:10px 0 0; line-height:1.6; min-height:18px; }
.editorial-note { display:flex; gap:11px; padding:17px 16px; background:var(--surface-soft); border-radius:8px; margin-top:6px; }
.editorial-icon { color:var(--text); font-size:15px; }
.editorial-note strong { font-size:11px; font-weight:600; }
.editorial-note p { font-size:11px; color:var(--muted); line-height:1.7; margin:5px 0 0; }
.rules-details { color:var(--muted); font-size:11px; margin-top:14px; }
.rules-details summary { cursor:pointer; padding:5px 0; }
.rules-details ul { padding-left:18px; line-height:1.8; }
.result-sticky { position:sticky; top:22px; }
.result-column { align-self:stretch; }
.recipe-card { padding:24px; background:var(--surface-soft); border:1px solid var(--border); border-radius:16px; }
.recipe-header { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:20px; }
.recipe-header .eyebrow { font-size:8px; letter-spacing:1.25px; }
.live-dot { width:6px; height:6px; border-radius:50%; background:#7c8962; }
.recipe-card h2 { font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:27px; letter-spacing:-.6px; }
.summary-topic { font-size:12px; line-height:1.7; margin:13px 0 19px; color:var(--muted); overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.summary-list { margin:0 0 22px; padding-top:12px; border-top:1px solid var(--border); }
.summary-list>div { display:flex; justify-content:space-between; align-items:baseline; gap:15px; margin-top:8px; font-size:11px; }
.summary-list dt { color:var(--muted); flex-shrink:0; }
.summary-list dd { margin:0; text-align:right; }
.primary-button { display:flex; width:100%; align-items:center; justify-content:space-between; padding:15px 19px; background:var(--accent); color:var(--accent-ink); border-radius:8px; font-size:13px; font-weight:600; min-height:50px; transition:background .15s,transform .15s; }
.primary-button:hover { background:var(--accent-hover); }
.primary-button:active { transform:translateY(1px); }
.primary-button>span { font-size:21px; line-height:1; }
.local-note { display:flex; align-items:center; justify-content:center; gap:6px; font-size:10px; color:var(--muted); margin:11px 0 0; }
.warnings { background:var(--warning-bg); color:var(--warning-ink); border-radius:7px; padding:12px; margin-bottom:18px; font-size:10px; }
.warning-title { margin:0 0 6px; font-weight:600; }
.warnings ul { padding-left:15px; margin:0; line-height:1.65; }
.warnings li+li { margin-top:5px; }
.output-card { padding:23px; margin-top:18px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.output-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.output-top h2 { font-size:14px; }
.status-badge { font-size:9px; color:var(--muted); background:var(--surface-soft); border-radius:4px; padding:4px 7px; white-space:nowrap; }
.status-badge.ready { background:var(--accent); color:var(--accent-ink); }
.empty-state { text-align:center; padding:31px 0 24px; }
.empty-mark { font:25px Georgia,serif; color:var(--muted); opacity:.6; }
.empty-state p { font-size:12px; margin:16px 0 6px; }
.empty-state>span:last-child { color:var(--muted); font-size:11px; line-height:1.7; }
#prompt-output { margin-top:18px; min-height:330px; max-height:650px; background:var(--bg); padding:14px; font:11px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; }
.output-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:10px; margin:10px 0 12px; }
.output-meta .text-button { font-size:10px; }
.copy-button { display:flex; justify-content:space-between; gap:10px; width:100%; background:var(--text); color:var(--surface); border-radius:7px; padding:13px 15px; font-size:12px; font-weight:550; }
.copy-button:hover { opacity:.9; }
.handoff-note { color:var(--muted); font-size:10px; line-height:1.7; margin:11px 0 0; }
.result-disclaimer { color:var(--muted); font-size:10px; line-height:1.8; text-align:center; margin:17px 0 24px; }
.mobile-submit { display:none; }
.site-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); padding:24px 0 32px; margin-top:27px; color:var(--muted); gap:20px; }
.site-footer p { font-family:Georgia,serif; font-style:italic; margin:0; font-size:14px; }
.site-footer>div { display:flex; align-items:center; gap:28px; }
.site-footer span { font:9px ui-monospace,monospace; letter-spacing:1px; }
.notice { padding:20px; background:var(--warning-bg); color:var(--warning-ink); border-radius:8px; margin-bottom:20px; }
dialog { width:min(520px,calc(100% - 32px)); padding:30px; border:1px solid var(--border); border-radius:16px; background:var(--surface); color:var(--text); box-shadow:0 20px 90px #0003; }
dialog::backdrop { background:#15180e80; backdrop-filter:blur(4px); }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:15px; }
.icon-button { background:var(--surface-soft); border-radius:50%; width:34px; height:34px; font-size:24px; line-height:1; }
dialog h2 { font:29px/1.2 Georgia,serif; }
dialog>p { color:var(--muted); font-size:13px; line-height:1.8; }
.help-steps { padding-left:23px; margin:26px 0; }
.help-steps li { padding-left:8px; margin:0 0 18px; font-size:13px; }
.help-steps p { color:var(--muted); font-size:12px; margin:4px 0 0; }
dialog .inline-note { padding:15px; background:var(--surface-soft); border-radius:8px; margin-bottom:20px; }
.dialog-actions { display:flex; gap:12px; margin-top:25px; }
.dialog-actions button { flex:1; justify-content:center; }
.secondary-button { padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font-size:13px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,14px); background:var(--text); color:var(--surface); box-shadow:0 4px 30px #0002; max-width:calc(100% - 32px); width:max-content; border-radius:9px; padding:12px 18px; z-index:50; font-size:12px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
@media(min-width:1000px) and (max-height:860px) { .result-sticky { position:static; } }
@media(min-width:1000px) { .result-sticky.has-output { position:static; } }
@media(max-width:1100px) { .site-header { padding:24px 36px; gap:18px; } .header-caption { display:none; } .workspace { gap:20px; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); } .card { padding:24px; } .recipe-card,.output-card { padding:21px; } .section-meta { display:none; } }
@media(max-width:820px) { .workspace { grid-template-columns:minmax(0,1fr); } .result-sticky { position:static; } .mobile-submit { display:block; margin:4px 0 8px; } .recipe-card { display:none; } .hero-note { display:none; } .hero { padding-top:40px; } .page { max-width:730px; padding:0 24px; } .site-header { padding:23px 24px; } .brand img { width:180px; } .header-actions { gap:16px; } .output-card { margin-top:0; } #prompt-output { min-height:340px; } .result-disclaimer br { display:none; } .warnings { margin-bottom:0; } .mobile-warnings { margin-bottom:18px; } .mobile-warnings .warnings { display:block; } }
@media(max-width:480px) { .site-header { padding:20px 18px; } .brand img { width:146px; } .how-button { display:none; } .theme-switch select { width:95px; font-size:11px; } .theme-symbol { font-size:19px; } .page { padding:0 16px; } .hero { padding:33px 2px 29px; } .hero .eyebrow { font-size:8px; letter-spacing:1.1px; margin-bottom:18px; } h1 { font-size:44px; letter-spacing:-2px; } .hero-bottom { margin-top:18px; } .hero-bottom p { font-size:13px; } .desktop-break { display:none; } .card { padding:22px 18px; border-radius:12px; margin-bottom:14px; } .section-heading { gap:9px; margin-bottom:21px; } h2 { font-size:18px; } .field-grid { grid-template-columns:1fr; } .field-grid .field:nth-last-child(2) { margin-bottom:20px; } .field select,textarea { font-size:16px; } .field select { padding-right:22px; } textarea { line-height:1.6; } #topic { min-height:160px; } .check-panel { padding:13px; } .presets { gap:6px; } .preset { font-size:10px; padding:8px; } .slider-top label { font-size:12px; } .slider-value { font-size:9px; } .segmented span { font-size:11px; } .site-footer { align-items:flex-start; padding-bottom:26px; margin-top:15px; } .site-footer>div { flex-direction:column; align-items:flex-end; gap:10px; } .site-footer p { font-size:12px; } dialog { padding:23px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }
@media print { .site-header,.hero,#builder,.recipe-card,.site-footer,.result-disclaimer,.output-meta,.copy-button,.toast { display:none !important; } body { background:white; color:black; } .page { max-width:none; padding:0; } .workspace { display:block; } .result-sticky { position:static; } .output-card { border:0; padding:0; } #prompt-output { max-height:none; height:2000px; border:0; background:white; color:black; } }