/* HOVELKIN 3.1 — an idea workshop, with one clear next step. */
:root {
  color-scheme: dark;
  --bg: #0b121b; --card: #121e2b; --inset: #0e1824; --ink: #edf4f7; --soft: #a5b6c4; --faint: #8b9eae;
  --line: #2a3b4b; --accent: #adf4cf; --accent-ink: #10251c; --accent-soft: #243e36;
  --sage: #adf4cf; --sage-soft: #203d31; --amber: #f3ce8b; --amber-soft: #3e3323; --red: #ffb4a5; --red-soft: #422b2c;
  --sans: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; --serif: var(--sans);
  --radius: 22px; --shadow: 0 20px 70px #00000020; --glow: #54c7980a;
}
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f1f5f3; --card: #fff; --inset: #f5f8f7; --ink: #142b2c; --soft: #4f6467; --faint: #5b6f71;
  --line: #d2dfdc; --accent: #1a6348; --accent-ink: #fff; --accent-soft: #dcefe4;
  --sage: #246349; --sage-soft: #e0f0e5; --amber: #765000; --amber-soft: #faf0d9; --red: #9b3728; --red-soft: #fbe6e0;
  --shadow: 0 20px 60px #1e4a3610; --glow: #5cae8b0c;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); min-width: 320px; }
html { scroll-behavior: smooth; }
body { font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; background-image: radial-gradient(ellipse at 18% 20%, var(--glow), transparent 52%); min-height: 100vh; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a, select, label.btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--sans); font-weight: 650; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.035em; overflow-wrap: anywhere; }
h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 .9em; }
[hidden] { display: none !important; }
button { transition: background .16s, border-color .16s, box-shadow .16s, transform .16s; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 12px 20px; }
.skip-link:focus { top: 12px; }
.top { display: flex; align-items: center; gap: 12px; padding: 25px 0; max-width: 1200px; margin: 0 auto 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 17px; letter-spacing: .12em; line-height: 1.3; margin-right: auto; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.brand img { width: 44px; height: 44px; }
.brand-sub { display: block; font-size: 9px; letter-spacing: .17em; color: var(--soft); font-weight: 500; margin-top: 5px; }
.tabs { display: flex; gap: 3px; background: var(--inset); border: 1px solid var(--line); border-radius: 13px; padding: 4px; }
.tabs button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; background: transparent; padding: 8px 13px; border-radius: 9px; cursor: pointer; color: var(--soft); font-size: 13px; min-height: 40px; white-space: nowrap; }
.tabs button[aria-current='step'] { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); font-weight: 650; }
.tabs button:disabled { opacity: .4; }
.step-number { font-size: 10px; opacity: .75; font-variant-numeric: tabular-nums; }
.langs select, .menu > button, .theme-toggle { border: 1px solid var(--line); background: var(--inset); border-radius: 10px; padding: 8px 12px; cursor: pointer; min-height: 42px; font-size: 13px; }
.langs select { max-width: 128px; }
.theme-toggle { width: 42px; padding: 0; font-size: 23px; }
.menu { position: relative; }
.menu-list { position: absolute; right: 0; top: calc(100% + 10px); background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px #0004; padding: 7px; min-width: 250px; z-index: 20; }
.menu-list button, .menu-list label { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 12px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.menu-list button:hover, .menu-list label:hover { background: var(--accent-soft); }
main { max-width: 830px; margin: 0 auto; padding: 10px 0 64px; }
main:focus { outline: none; }
main.wide, main.home-main { max-width: 1200px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 4vw, 38px); box-shadow: var(--shadow); margin: 16px 0; }
.kicker { font-size: 10px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; color: var(--soft); margin-bottom: 14px; }
.hint { color: var(--soft); font-size: 15px; line-height: 1.7; }
.muted { color: var(--soft); font-size: 13px; }
.quote { border-left: 2px solid var(--line); padding: .2em 0 .2em 1em; color: var(--soft); font-style: normal; font-size: 14px; margin: .6em 0; overflow-wrap: anywhere; }
.project-context { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--soft); margin: 6px 0 24px; min-width: 0; }
.project-context > span:not(.context-dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.context-label { margin-left: auto; font-size: 11px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; flex: none; }
/* A calm split layout puts the story beside the first action. */
.home-grid { display: grid; grid-template-columns: 1fr 1.06fr; gap: clamp(36px, 6vw, 88px); align-items: center; padding: 36px 0 50px; }
.hero { padding: 0 0 0 3px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: .15em; margin-bottom: 28px; }
.live-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px var(--accent-soft); flex: none; }
.hero h1 { font-size: clamp(3.2rem, 5.2vw, 4.8rem); font-weight: 650; line-height: 1.04; letter-spacing: -.065em; margin-bottom: 25px; }
.hero h1 span { color: var(--accent); }
.hero-description { font-size: 16px; line-height: 1.8; color: var(--soft); max-width: 400px; }
.hero-note { display: flex; gap: 12px; margin: 28px 0 32px; }
.note-mark { font-size: 30px; line-height: 1; color: var(--accent); }
.hero-note p { font-size: 13px; line-height: 1.7; white-space: pre-line; margin: 0; }
.example-list { max-width: 355px; }
.example-list .kicker { margin-bottom: 7px; }
.example { width: 100%; display: flex; justify-content: space-between; gap: 14px; align-items: center; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; text-align: left; font-size: 13px; color: var(--soft); cursor: pointer; min-height: 44px; }
.example span { color: var(--accent); font-size: 17px; }
.example:hover { color: var(--ink); padding-left: 5px; }
.composer { margin: 0; padding: 30px; position: relative; border-top-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.composer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.composer-top .kicker { color: var(--accent); margin: 0; }
.composer-index { color: var(--faint); font-size: 10px; letter-spacing: .12em; }
.composer h2 { font-size: clamp(1.6rem, 2.2vw, 2rem); max-width: 370px; }
.composer .hint { font-size: 13px; margin-bottom: 21px; }
.composer-submit { margin-top: 22px; }
.composer-submit .btn { justify-content: space-between; }
.composer-submit .btn span { font-size: 24px; line-height: 1; }
.keyboard-hint { display: block; text-align: center; font-size: 10px; color: var(--faint); margin-top: 10px; }
.privacy-note { border-top: 1px solid var(--line); padding-top: 18px; margin: 20px 0 0; font-size: 11px; color: var(--soft); line-height: 1.7; }
.process-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 25px 0; gap: 28px; }
.process-item { display: flex; align-items: flex-start; gap: 15px; }
.process-number { font-size: 10px; color: var(--accent); border: 1px solid var(--line); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; flex: none; }
.process-item h3 { font-size: 14px; margin: 3px 0 7px; letter-spacing: -.02em; }
.process-item p { color: var(--soft); font-size: 12px; margin: 0; max-width: 230px; line-height: 1.65; }
textarea, input[type=text], input[type=password], input:not([type]) { width: 100%; border: 1px solid var(--line); background: var(--inset); border-radius: 13px; padding: 17px; resize: vertical; line-height: 1.65; }
textarea::placeholder, input::placeholder { color: var(--faint); opacity: 1; }
textarea:focus, input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
textarea.big { min-height: 210px; font-size: 16px; }
.composer textarea.big { min-height: 195px; font-size: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 11px; padding: 12px 22px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; font-weight: 650; font-size: 14px; text-decoration: none; min-height: 46px; line-height: 1.4; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 15px #0002; filter: brightness(1.04); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.quiet { background: transparent; border-color: var(--line); color: var(--soft); font-weight: 500; }
.btn.quiet:hover { color: var(--ink); border-color: var(--soft); }
.btn.huge { font-size: 15px; padding: 16px 22px; width: 100%; min-height: 56px; letter-spacing: .01em; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.small { padding: 8px 13px; font-size: 12px; min-height: 40px; }
.linkish { background: none; border: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.chip { border: 1px solid var(--line); color: var(--accent); background: var(--accent-soft); border-radius: 9px; padding: 9px 12px; cursor: pointer; font-size: 12px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.choice { text-align: left; border: 1px solid var(--line); background: var(--inset); border-radius: 15px; padding: 26px 22px; cursor: pointer; }
.choice:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.choice b { display: block; font-size: 1.35rem; margin-bottom: 13px; letter-spacing: -.03em; }
.choice .hint { font-size: 13px; }
.badge { display: inline-block; font-size: 10px; border-radius: 6px; padding: 3px 7px; background: var(--accent-soft); color: var(--accent); margin-left: 8px; vertical-align: middle; font-weight: 500; letter-spacing: 0; }
.notice { border-radius: 12px; padding: 16px 18px; margin: 18px 0; font-size: 14px; border: 1px solid transparent; }
.notice.ok { background: var(--sage-soft); color: var(--sage); border-color: color-mix(in srgb, var(--sage) 25%, transparent); }
.notice.warn { background: var(--amber-soft); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 25%, transparent); }
.notice.bad { background: var(--red-soft); color: var(--red); border-color: color-mix(in srgb, var(--red) 25%, transparent); }
.notice p:last-child { margin: 0; }
.notice ul { margin: .4em 0 0; padding-left: 1.2em; }
.bucket { margin: 28px 0; }
.bucket > h3 { font-size: 11px; letter-spacing: .12em; color: var(--soft); margin-bottom: 13px; }
.bucket.now > h3 { color: var(--sage); } .bucket.dont > h3 { color: var(--red); } .bucket.call > h3 { color: var(--accent); }
.item { border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 10px 0; background: var(--inset); }
.item.undecided { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.item-name { font-weight: 650; font-size: 15px; }
.seg { display: inline-grid; grid-template-columns: repeat(3, auto); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-top: 13px; }
.seg button { border: 0; background: transparent; padding: 12px 14px; cursor: pointer; font-size: 11px; line-height: 1.2; min-height: 42px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed='true'].now { background: var(--sage-soft); color: var(--sage); font-weight: 700; }
.seg button[aria-pressed='true'].later { background: var(--amber-soft); color: var(--amber); font-weight: 700; }
.seg button[aria-pressed='true'].dont { background: var(--red-soft); color: var(--red); font-weight: 700; }
.seg button:disabled { opacity: .4; cursor: not-allowed; }
details { margin: 18px 0; border-top: 1px solid var(--line); padding-top: 14px; }
summary { cursor: pointer; color: var(--soft); font-size: 14px; padding: 4px 0; }
dl.answers dt { font-weight: 600; margin-top: 18px; font-size: 14px; }
dl.answers dd { margin: 5px 0 0; color: var(--soft); overflow-wrap: anywhere; font-size: 14px; }
pre.json { background: var(--inset); border: 1px solid var(--line); border-radius: 12px; padding: 16px; overflow: auto; max-height: 50vh; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.actions button { border: 1px solid var(--line); background: var(--inset); border-radius: 12px; padding: 17px 14px; cursor: pointer; font-weight: 500; font-size: 13px; min-height: 56px; }
.actions button:hover { border-color: var(--soft); }
.actions button[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.preview { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.check { display: flex; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.check .dot { flex: none; width: 1.4em; text-align: center; }
.check.fail .dot { color: var(--red); } .check.pass .dot { color: var(--sage); } .check.human .dot, .check.warn .dot { color: var(--amber); }
.overlay { position: fixed; inset: 0; background: #050b14b8; backdrop-filter: blur(8px); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 20px; z-index: 50; overflow: auto; }
.modal { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 36px); max-width: 720px; width: 100%; box-shadow: 0 25px 80px #0005; }
.modal li { margin-bottom: 12px; font-size: 14px; color: var(--soft); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--accent); color: var(--accent-ink); padding: 13px 20px; border-radius: 12px; z-index: 60; max-width: calc(100vw - 32px); font-size: 13px; box-shadow: var(--shadow); }
.attach { font-size: 12px; color: var(--soft); margin-top: 10px; overflow-wrap: anywhere; }
.attach li { list-style: none; }
.attach ul { padding: 0; margin: 6px 0; }
.foot { display: flex; gap: 20px; justify-content: space-between; max-width: 1200px; margin: 0 auto; color: var(--faint); font-size: 10px; padding: 26px 0 32px; letter-spacing: .03em; }
.foot > span:first-child { letter-spacing: .12em; }
.mt { margin-top: 12px; } .mt2 { margin-top: 22px; } .my { margin: 12px 0; } .my2 { margin: 22px 0; } .center { text-align: center; } .bare { border: 0; padding: 0; margin: 10px 0; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
@media (max-width: 1280px) { .top, main, main.home-main, main.wide, .foot { margin-left: 32px; margin-right: 32px; } main:not(.wide):not(.home-main) { margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } }
@media (max-width: 1000px) {
  .tabs { order: 5; width: 100%; justify-content: space-between; margin-top: 8px; }
  .tabs button { flex: 1; justify-content: center; }
  .home-grid { gap: 32px; }
  .hero h1 { font-size: 3.6rem; }
  .composer { padding: 25px; }
}
@media (max-width: 760px) {
  .top, main.home-main, main.wide, .foot { margin-left: 22px; margin-right: 22px; }
  .top { padding: 20px 0; margin-bottom: 12px; gap: 8px; }
  .brand { font-size: 14px; gap: 8px; letter-spacing: .09em; }
  .brand img { width: 36px; height: 36px; }
  .brand-sub { font-size: 8px; letter-spacing: .08em; }
  .home-grid { grid-template-columns: 1fr; padding-top: 25px; gap: 32px; padding-bottom: 32px; }
  .hero h1 { font-size: clamp(3rem, 10vw, 4.5rem); margin-bottom: 18px; }
  .hero-description { max-width: 540px; font-size: 15px; }
  .hero-note, .example-list { display: none; }
  .eyebrow { margin-bottom: 22px; font-size: 9px; }
  .process-strip { gap: 20px; grid-template-columns: 1fr; padding: 25px 0; }
  .process-item p { max-width: none; }
  .foot { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 480px) {
  .top, main.home-main, main.wide, .foot { margin-left: 16px; margin-right: 16px; }
  main:not(.wide):not(.home-main) { padding-left: 16px; padding-right: 16px; }
  .langs select, .menu > button { padding: 8px; font-size: 12px; }
  .theme-toggle { min-height: 40px; width: 34px; font-size: 21px; }
  .brand img { width: 30px; height: 30px; }
  .brand-sub { display: none; }
  .brand { font-size: 12px; gap: 7px; }
  .top { gap: 6px; }
  .langs select { max-width: 98px; }
  .tabs { gap: 0; padding: 3px; }
  .tabs button { padding: 9px 6px; font-size: 11px; gap: 5px; }
  .step-number { font-size: 8px; }
  .composer { padding: 23px 20px; }
  .composer-top { margin-bottom: 22px; }
  .composer textarea.big { min-height: 170px; }
  .keyboard-hint { display: none; }
  .choices { grid-template-columns: 1fr; }
  .seg { display: grid; grid-template-columns: repeat(3, 1fr); }
  .seg button { padding: 11px 7px; font-size: 10px; }
  .actions { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 24px 20px; }
  .preview { min-height: 340px; }
  .row .btn { flex-shrink: 1; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
/* STUDIO: the idea, the decision, and the thing live on one workbench. */
:root {--rail:#0b161f;--panel:#101d29;--gold:#e7c28a;--paper-text:#b9c7d1;--studio-grid:#8aa6bf07;}
:root[data-theme=light]{--rail:#e7eeea;--panel:#f8fbf9;--gold:#885b1b;--paper-text:#4f6467;--studio-grid:#44665a08;}
.studio-shell{display:grid;grid-template-columns:212px minmax(0,1fr);min-height:100vh;}
.studio-rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:26px;background:var(--rail);border-right:1px solid var(--line);padding:31px 20px;}
.rail-brand{font-size:13px;gap:10px;margin:0;}.rail-brand img{width:36px;height:36px;}.rail-brand .brand-sub{font-size:7px;letter-spacing:.12em;}
.rail-project{padding:21px 4px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}.rail-project .kicker{display:block;font-size:8px;color:var(--gold);margin:0 0 10px;letter-spacing:.17em;}.rail-project strong{display:block;font-size:14px;line-height:1.45;overflow-wrap:anywhere;font-weight:600;}.rail-project-meta{display:block;font-size:10px;color:var(--soft);margin-top:8px;}
.rail-steps{display:flex;flex-direction:column;gap:8px;}.rail-steps button{display:flex;align-items:flex-start;gap:11px;padding:13px 10px;border:1px solid transparent;background:none;color:var(--soft);border-radius:11px;cursor:pointer;text-align:left;}.rail-steps button[aria-current=step]{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent);}.rail-steps b{font-size:12px;font-weight:650;display:block;}.rail-steps small{font-size:9px;display:block;margin-top:3px;color:var(--soft);line-height:1.6;}.rail-step-number{font-size:9px;letter-spacing:.05em;padding-top:2px;color:var(--faint);}.rail-steps button:disabled{opacity:.32;cursor:default;}.rail-steps button:not(:disabled):hover{border-color:var(--line);background:var(--panel);}
.rail-bottom{margin-top:auto;display:flex;flex-direction:column;gap:20px;}.rail-principle{display:flex;gap:10px;align-items:flex-start;margin:20px 4px 0;}.rail-principle>span{font-size:24px;line-height:1;color:var(--gold);}.rail-principle p{font-size:11px;color:var(--soft);white-space:pre-line;margin:0;line-height:1.8;}.rail-bottom .btn{font-size:10px;min-height:39px;}.rail-version{font-size:8px;letter-spacing:.18em;color:var(--faint);margin-left:4px;}
.studio-stage{min-width:0;background-image:linear-gradient(var(--studio-grid) 1px,transparent 1px),linear-gradient(90deg,var(--studio-grid) 1px,transparent 1px);background-size:32px 32px;}
.studio-header.top{max-width:none;margin:0 32px;padding:22px 0;min-height:82px;gap:10px;border-bottom:1px solid var(--line);}.studio-header>.brand,.studio-header>.tabs{display:none;}.studio-breadcrumb{margin-right:auto;display:flex;gap:14px;align-items:center;min-width:0;}.studio-breadcrumb>span{font-size:9px;letter-spacing:.15em;color:var(--faint);white-space:nowrap;}.studio-breadcrumb b{font-size:12px;font-weight:500;color:var(--soft);border-left:1px solid var(--line);padding-left:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:35vw;}
.studio-workbench{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:26px;padding:28px 32px 0;align-items:start;max-width:1580px;margin:0 auto;}
.studio-shell main,.studio-shell main.wide,.studio-shell main.home-main{margin:0;max-width:none;padding:0 0 40px;width:100%;min-width:0;}
.studio-welcome{max-width:1160px;padding:0 40px;margin:0 auto;}.studio-welcome .home-grid{grid-template-columns:1fr 1fr;gap:40px;padding:54px 0 45px;}.studio-welcome .hero h1{font-size:clamp(3rem,4.8vw,4.5rem);}.studio-welcome .hero-description{font-size:14px;}.studio-welcome .composer{padding:27px;}.studio-welcome .composer h2{font-size:1.85rem;}.studio-welcome .composer .hint{font-size:12px;}.studio-welcome .example{font-size:11px;}.studio-welcome .hero-note{margin:25px 0;}.studio-welcome .process-strip{background:var(--bg);}.studio-welcome .eyebrow{font-size:8px;}
.studio-shell .foot{max-width:none;margin:0 32px;padding:18px 0 25px;font-size:8px;}.studio-shell .project-context{margin:0 0 19px;font-size:11px;}.studio-shell .context-label{font-size:9px;}.studio-shell .card{padding:30px;margin:0 0 18px;border-radius:18px;box-shadow:0 15px 45px #00000012;}.studio-shell h2{font-size:clamp(1.7rem,2.35vw,2.25rem);line-height:1.2;letter-spacing:-.04em;}.studio-shell .card .hint{font-size:14px;}.question-card{border-top:2px solid var(--accent);}.conversation-label{display:flex;gap:9px;align-items:center;margin-bottom:35px;font-size:8px;letter-spacing:.14em;color:var(--accent);font-weight:600;}.conversation-label img{width:25px;height:25px;border-radius:7px;}.question-card .kicker{font-size:8px;color:var(--gold);margin-bottom:12px;}.question-card textarea.big{font-size:16px;min-height:200px;}.question-card .row.mt2{padding-top:21px;margin-top:20px;border-top:1px solid var(--line);}.question-card .row.mt .btn{font-size:10px;min-height:35px;padding:7px 11px;}
.live-brief{position:sticky;top:24px;background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:23px 20px;min-width:0;}.brief-mobile-toggle{display:none;}.brief-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:23px;}.brief-heading .kicker{font-size:7px;color:var(--gold);letter-spacing:.13em;margin:0;}.brief-live{font-size:8px;color:var(--soft);display:flex;gap:5px;align-items:center;white-space:nowrap;}.brief-live i{display:block;background:var(--accent);width:4px;height:4px;border-radius:50%;}.live-brief h2{font-size:22px;letter-spacing:-.045em;line-height:1.25;margin-bottom:10px;}.brief-intro{font-size:10px;line-height:1.8;color:var(--soft);margin-bottom:20px;}.brief-field{border-top:1px solid var(--line);padding-top:16px;margin-top:16px;}.brief-field>span{font-size:8px;letter-spacing:.12em;color:var(--faint);font-weight:650;}.brief-field>p{font-size:11px;line-height:1.7;color:var(--paper-text);margin:8px 0 0;max-height:125px;overflow:auto;overflow-wrap:anywhere;}.brief-empty{display:flex;align-items:center;gap:13px;border:1px dashed var(--line);border-radius:10px;padding:18px 13px;margin:22px 0;}.brief-empty>span{color:var(--accent);font-size:24px;}.brief-empty p{font-size:10px;line-height:1.7;white-space:pre-line;color:var(--soft);margin:0;}.brief-parts{padding-left:15px;margin:10px 0 0;font-size:10px;line-height:1.7;color:var(--soft);}.brief-parts li{margin-bottom:7px;}.brief-design{border-top:1px solid var(--line);margin-top:23px;padding-top:21px;}.brief-design h3{font-size:12px;letter-spacing:-.02em;}.brief-design .muted{font-size:9px;line-height:1.6;}.directions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:14px;}.direction{border:1px solid var(--line);border-radius:9px;padding:5px 5px 8px;background:var(--bg);cursor:pointer;font-size:8px;min-width:0;text-align:left;}.direction[aria-pressed=true]{outline:1px solid var(--accent);border-color:var(--accent);}.direction>span:last-child{display:block;padding:4px 2px 0;}.direction-swatch{display:flex;height:42px;flex-direction:column;justify-content:center;gap:3px;border-radius:4px;padding:8px;overflow:hidden;}.direction-swatch i{height:3px;background:currentColor;display:block;width:80%;border-radius:1px;}.direction-swatch i:nth-child(2){width:60%;opacity:.4;}.direction-swatch i:last-child{width:35%;height:6px;margin-top:3px;background:#3157c8;}.direction-studio .direction-swatch{background:#f0f3fa;color:#23426a;}.direction-paper .direction-swatch{background:#f2e8d7;color:#5e4731;}.direction-paper .direction-swatch i:last-child{background:#935431;}.direction-midnight .direction-swatch{background:#1a2638;color:#d1e4f7;}.direction-midnight .direction-swatch i:last-child{background:#b8e783;}.brief-state{display:flex;gap:8px;align-items:flex-start;font-size:9px;color:var(--soft);line-height:1.7;border-top:1px solid var(--line);padding-top:17px;margin-top:20px;}.brief-state.is-approved{color:var(--accent);}.brief-state>span{color:var(--accent);}.brief-ai{width:100%;margin-top:18px;font-size:11px!important;}
.conversation-trail{border:1px solid var(--line);border-radius:13px;padding:14px 19px;background:var(--panel);}.conversation-trail summary{font-size:11px;}.trail-entry{padding:17px 0;border-top:1px solid var(--line);margin-top:14px;}.trail-entry>span{font-size:10px;color:var(--soft);}.trail-entry p{font-size:12px;margin:7px 0;overflow-wrap:anywhere;}.trail-entry .linkish{font-size:10px;}
.studio-shell .actions{gap:8px;margin-top:22px;}.studio-shell .actions button{font-size:11px;padding:13px 7px;min-height:54px;}.studio-shell .seg{max-width:100%;}.studio-shell .seg button{font-size:10px;padding:11px 12px;}.studio-shell .bucket>h3{font-size:9px;}.studio-shell .item-name{font-size:14px;}.studio-shell .quote{font-size:12px;}.studio-shell .item .muted{font-size:11px;}.studio-shell .item{padding:18px;}.studio-shell .notice{font-size:12px;}.studio-shell .btn{font-size:12px;}.studio-shell .btn.huge{font-size:14px;}.studio-shell .answers{font-size:13px;}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}.preview-toolbar .kicker{margin:0;font-size:8px;color:var(--gold);}.preview-sizes{display:flex;border:1px solid var(--line);border-radius:7px;padding:3px;}.preview-sizes button{border:0;background:none;border-radius:4px;color:var(--soft);font-size:9px;padding:7px 9px;cursor:pointer;}.preview-sizes button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);}.preview-panel>.muted{font-size:10px;}.preview-panel .preview{display:block;height:65vh;min-height:420px;margin:0 auto;border-radius:10px;}.preview-panel .preview-phone{width:390px;max-width:100%;border:5px solid var(--line);border-radius:22px;}.preview-panel .preview-desktop{width:100%;}
.coach-transcript{max-height:32vh;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:14px;margin:20px 0;}.coach-message{padding:15px 18px;border-radius:12px;background:var(--inset);border:1px solid var(--line);font-size:13px;}.coach-message b{font-size:9px;letter-spacing:.06em;color:var(--accent);}.coach-message p{white-space:pre-wrap;margin:8px 0 0;overflow-wrap:anywhere;}.coach-user{margin-left:32px;}.coach-assistant{margin-right:12px;background:var(--accent-soft);}.coach-proposals h3{font-size:15px;}.coach-proposals .item>b{display:block;font-size:12px;}.coach-proposals textarea{font-size:13px;margin:12px 0;}.modal:has(.coach-transcript){max-width:760px;}
@media(min-width:1700px){.studio-shell{grid-template-columns:240px minmax(0,1fr);}.studio-rail{padding-left:27px;padding-right:27px;}.studio-workbench{grid-template-columns:minmax(0,1fr) 310px;padding-left:45px;padding-right:45px;gap:35px;}.live-brief{padding:27px;}.live-brief h2{font-size:26px;}}
@media(max-width:1180px){.studio-shell{grid-template-columns:180px minmax(0,1fr);}.studio-rail{padding:26px 14px;}.rail-brand{font-size:11px;gap:8px;}.rail-brand img{width:30px;height:30px;}.rail-brand .brand-sub{font-size:6px;}.studio-workbench{grid-template-columns:minmax(0,1fr) 230px;gap:17px;padding:25px 23px 0;}.studio-header.top{margin:0 23px;}.studio-breadcrumb>span{display:none;}.studio-breadcrumb b{border:0;padding:0;}.live-brief{padding:20px 16px;}.studio-shell .card{padding:25px;}.studio-welcome{padding:0 28px;}.studio-welcome .home-grid{gap:28px;}.studio-welcome .hero h1{font-size:3.4rem;}.studio-welcome .hero-note,.studio-welcome .example-list{display:none;}.studio-welcome .process-item{gap:11px;}.studio-welcome .process-item p{font-size:10px;}}
@media(max-width:950px){.studio-workbench{grid-template-columns:minmax(0,1fr);}.live-brief{position:static;order:-1;padding:0;background:var(--panel);}.brief-mobile-toggle{display:flex;width:100%;border:0;background:none;color:var(--accent);padding:15px 20px;font-size:10px;letter-spacing:.1em;cursor:pointer;}.brief-content{display:none;padding:10px 25px 25px;}.live-brief.is-open .brief-content{display:block;}.live-brief .directions{max-width:280px;}.studio-welcome .home-grid{grid-template-columns:1fr;gap:28px;padding-top:40px;}.studio-welcome .hero h1{font-size:3.7rem;}.studio-welcome .hero-description{max-width:560px;}.studio-welcome .composer{max-width:650px;}.studio-welcome .process-strip{grid-template-columns:1fr;gap:22px;}.studio-shell .card{padding:30px;}.studio-shell .foot{margin:0 23px;}}
@media(max-width:680px){.studio-shell{display:block;}.studio-rail{position:static;height:auto;display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid var(--line);padding:17px 20px;gap:12px;}.rail-brand{font-size:13px;}.rail-brand img{width:33px;height:33px;}.rail-brand .brand-sub{display:block;font-size:7px;}.rail-project,.rail-steps,.rail-principle,.rail-bottom>.btn{display:none;}.rail-bottom{margin:0;gap:0;}.rail-version{font-size:7px;}.studio-header.top{min-height:64px;margin:0 18px;padding:12px 0;}.studio-breadcrumb{min-width:0;}.studio-breadcrumb b{font-size:11px;max-width:37vw;}.studio-header>.tabs{display:flex;margin-top:8px;order:5;width:100%;}.studio-header .theme-toggle{width:33px;min-height:36px;}.studio-header .langs select,.studio-header .menu>button{min-height:36px;font-size:11px;}.studio-workbench{padding:20px 16px 0;gap:18px;}.studio-welcome{padding:0 18px;}.studio-welcome .home-grid{padding:29px 0 30px;}.studio-welcome .hero h1{font-size:clamp(2.9rem,10vw,3.8rem);line-height:1.04;}.studio-welcome .eyebrow{font-size:8px;line-height:1.6;}.studio-welcome .hero-description{font-size:13px;line-height:1.8;}.studio-shell .card{padding:24px 20px;border-radius:15px;}.studio-welcome .composer h2{font-size:1.7rem;}.studio-shell h2{font-size:1.8rem;}.question-card textarea.big{min-height:185px;font-size:15px;}.conversation-label{margin-bottom:25px;}.studio-shell .project-context{display:none;}.studio-shell .item{padding:16px;}.studio-shell .seg button{font-size:10px;padding:10px 8px;}.studio-shell .seg{display:grid;grid-template-columns:repeat(3,1fr);}.studio-shell .actions button{font-size:11px;}.studio-shell .preview{min-height:400px;}.studio-shell .foot{margin:0 18px;padding-top:8px;font-size:8px;}.brief-content{padding:10px 20px 22px;}.brief-mobile-toggle{padding:14px 18px;}.preview-toolbar{flex-wrap:wrap;}.studio-shell main{padding-bottom:24px;}}
@media(max-width:370px){.studio-header .studio-breadcrumb{display:none;}.studio-header .theme-toggle{margin-right:auto;}.studio-welcome .composer{padding:22px 17px;}.studio-shell .card{padding:22px 17px;}.studio-shell .seg button{font-size:9px;}.question-card .row.mt .btn{font-size:9px;padding:7px 9px;}}

/* Help remains reachable on small screens and at every project stage. */
.help-entry{white-space:normal;max-width:160px;}
.help-start{margin:24px 0;}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 20px;}
.foot a{font-size:12px;color:var(--soft);text-decoration:underline;text-underline-offset:4px;}
.help-question{border-top:1px solid var(--line);padding:16px 0;}
.help-question summary{cursor:pointer;font-weight:650;line-height:1.5;}
.help-question p,.privacy-section p{line-height:1.75;color:var(--soft);overflow-wrap:anywhere;}
.help-question p{margin:14px 0 0;}
.privacy-section{margin:26px 0;}
.modal progress{width:100%;height:8px;accent-color:var(--accent);}
.tour-preview{width:100%;height:430px;background:white;margin:20px 0;}
.modal blockquote{border-left:3px solid var(--accent);padding:16px;margin:20px 0;color:var(--soft);}
@media(max-width:760px){.studio-header{flex-wrap:wrap;}.help-entry{max-width:none;}.modal{padding:22px 18px;}.overlay{padding:16px 10px;}.tour-preview{height:360px;}}


/* 3.5 — one next move, visible saving, less guesswork. */
.save-state{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:9px;letter-spacing:.04em;color:var(--soft);background:var(--panel);}
.save-state::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--faint);box-shadow:0 0 0 3px color-mix(in srgb,var(--faint) 12%,transparent);}
.save-state.is-saving::before{background:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 14%,transparent);}
.save-state.is-saved::before{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);}
.save-state.is-error{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 35%,var(--line));}.save-state.is-error::before{background:var(--amber);}
.next-move{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:18px;margin:0 0 18px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:14px;background:linear-gradient(100deg,color-mix(in srgb,var(--accent-soft) 72%,var(--panel)),var(--panel));box-shadow:0 12px 32px #0000000d;}
.next-move-copy{min-width:0}.next-move-copy .kicker{margin:0 0 4px;color:var(--gold);font-size:7px;letter-spacing:.16em}.next-move-copy strong{display:block;font-size:12px;font-weight:600;line-height:1.55;color:var(--ink);overflow-wrap:anywhere;}
.momentum-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;width:92px}.momentum-steps i{display:block;height:4px;border-radius:999px;background:var(--line)}.momentum-steps i.is-done{background:color-mix(in srgb,var(--accent) 55%,var(--line))}.momentum-steps i.is-current{background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 30%,transparent)}
.momentum-action{white-space:nowrap;min-width:96px;}
@media(max-width:950px){.next-move{grid-template-columns:78px minmax(0,1fr) auto}.momentum-steps{width:78px}.save-state{font-size:8px;padding:6px 8px}}
@media(max-width:680px){.save-state{order:4;margin-left:auto}.studio-header .help-entry{display:none}.next-move{grid-template-columns:1fr auto;gap:12px;padding:14px 15px}.momentum-steps{grid-column:1/-1;width:100%;}.next-move-copy strong{font-size:11px}.momentum-action{min-width:0;padding:9px 12px!important;font-size:10px!important}}
@media(max-width:420px){.save-state{max-width:130px;overflow:hidden;text-overflow:ellipsis}.next-move{grid-template-columns:1fr}.momentum-action{width:100%}}