/* Copied from docs/design/app-redesign-mock.html. This page loads only this file so the agreed mock renders unchanged. */
/* Layout: homepage tokens (lavender ground, purple + pink accents); app shell = work area left, AI chat always on the right (bottom sheet on phones). */
:root {
  --bg:#fcfaff; --surface:#fff; --text:#211c34; --muted:#665c74;
  --line:#e5dced; --accent:#7940cc; --pink:#c9328e; --soft:#f4eafa;
  --chat:#2a2140; --chat-text:#faf4ff; --chat-muted:#cbbbe0; --chat-bubble:#3a2d55; --chat-me:#5a3a8c;
  --mock:#fff4d6; --mock-text:#6b4a00;
  --shadow:0 18px 55px #58357318;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#100c21; --surface:#1d1733; --text:#faf4ff; --muted:#c8bdd9; --line:#4b355e; --accent:#cfadff; --pink:#ff94d1; --soft:#30203f;
  --chat:#241b41; --chat-text:#faf4ff; --chat-muted:#c8bdd9; --chat-bubble:#3a2b5a; --chat-me:#6b3f86;
  --mock:#3a3012; --mock-text:#ffe08a; --shadow:0 18px 55px #05020d55; color-scheme:dark } }
:root[data-theme="dark"] {
  --bg:#100c21; --surface:#1d1733; --text:#faf4ff; --muted:#c8bdd9; --line:#4b355e; --accent:#cfadff; --pink:#ff94d1; --soft:#30203f;
  --chat:#241b41; --chat-text:#faf4ff; --chat-muted:#c8bdd9; --chat-bubble:#3a2b5a; --chat-me:#6b3f86;
  --mock:#3a3012; --mock-text:#ffe08a; --shadow:0 18px 55px #05020d55; color-scheme:dark }
* { box-sizing:border-box }
/* .work sets display:flex, which would otherwise override the hidden attribute and show both screens. */
[hidden] { display:none !important }
body { background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.75; font-size:15px;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)) }
h1,h2,h3,p { margin:0 } h1,h2,h3 { line-height:1.45; letter-spacing:-.03em; text-wrap:balance }
button,input,textarea { font:inherit; color:inherit }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--accent); outline-offset:3px }
.shell { max-width:1240px; margin:0 auto; padding-block:14px 40px; display:flex; flex-direction:column; gap:14px }

/* mock bar */
.mockbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; background:var(--mock); color:var(--mock-text); border-radius:14px; padding:10px 14px; font-size:13px }
.mockbar strong { font-weight:700 }
.tabs { display:flex; flex-wrap:wrap; gap:6px; margin-left:auto }
.tabs a { text-decoration:none; padding:5px 12px; border-radius:30px; border:1px solid currentColor; font-size:12.5px; font-weight:600 }
.tabs a[aria-current="page"] { background:var(--mock-text); color:var(--mock) }

/* header */
.top { display:flex; align-items:center; gap:14px; padding-block:6px }
.brand { display:flex; align-items:center; gap:8px; font-size:24px; font-weight:800; letter-spacing:-1px; text-decoration:none; color:var(--text) }
.brand span { color:var(--pink) }
.top .right { margin-left:auto; display:flex; gap:10px; align-items:center; font-size:13px; color:var(--muted) }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:40px; min-height:48px; padding:12px 24px; font-weight:700; font-size:15px; border:0; cursor:pointer; text-decoration:none }
.btn.primary { color:#fff; background:linear-gradient(105deg,#bd237d,#7040d7); box-shadow:0 8px 28px #bd3aab30 }
.btn.ghost { background:var(--surface); border:1px solid var(--line); color:var(--text) }
.btn.small { min-height:36px; padding:6px 14px; font-size:13px }
.gradient { background:linear-gradient(100deg,#8254db,#c9328e); -webkit-background-clip:text; background-clip:text; color:transparent }

/* entry */
.entry { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:center; padding-block:20px }
.entry h1 { font-size:clamp(30px,4vw,46px); line-height:1.35 }
.entry .lead { color:var(--muted); margin-top:14px }
.entry .cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; align-items:center }
.entry .cta small { color:var(--muted); font-size:12px; width:100% }
.photo { border-radius:80px 24px 24px 24px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5; max-width:100% }
.photo img { width:100%; height:100%; object-fit:cover; object-position:52% 35% }
.three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:8px }
.three div { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:14px 16px }
.three b { display:block; font-size:14px } .three span { font-size:13px; color:var(--muted) }

.vision { display:flex; flex-direction:column; gap:10px; padding-block:34px 10px }
.vision h2 { font-size:clamp(24px,3vw,34px) }
.eyebrow { font-size:11px; letter-spacing:.15em; color:var(--accent); font-weight:700 }
.four { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:12px }
.u { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:20px; display:flex; flex-direction:column; gap:8px; min-width:0 }
.u .num { font-size:11px; letter-spacing:.12em; font-weight:700; color:var(--muted) }
.u h3 { font-size:18px } .u p { font-size:14px; color:var(--muted) }
.u.pink h3 { color:var(--pink) } .u.purple h3 { color:var(--accent) }
.u.next { background:linear-gradient(145deg,#302441,#1c1a33); color:#faf4ff; border-color:transparent }
.u.next p, .u.next .num { color:#d9cbe9 }
.foot { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11.5px; color:var(--muted); padding-block:24px 8px; border-top:1px solid var(--line); margin-top:24px }
.foot a { color:var(--muted) }
@media (max-width: 1000px) { .four { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width: 560px) { .four { grid-template-columns:minmax(0,1fr) } }
/* login */
.login { display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:28px; align-items:stretch; padding-block:16px }
.card { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:26px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; min-width:0 }
.card h1 { font-size:24px }
.provider { display:flex; align-items:center; gap:12px; width:100%; min-height:50px; border-radius:14px; border:1px solid var(--line); background:var(--bg); padding:10px 16px; font-weight:700; cursor:pointer; text-align:left }
.provider i { font-style:normal; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:800; color:#fff; flex:none }
.provider-google { background:#4285f4 }
.provider-x { background:#111 }
.or { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px } .or:before,.or:after { content:""; flex:1; height:1px; background:var(--line) }
.field { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600 }
.field input { border:1px solid var(--line); background:var(--bg); border-radius:12px; padding:11px 12px; font-size:16px; font-weight:400 }
.check { display:flex; gap:8px; align-items:flex-start; font-size:13px }
.note { font-size:12px; color:var(--muted) }
.login .photo { aspect-ratio:auto; min-height:420px; border-radius:24px 80px 24px 24px }
.linkish { background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; cursor:pointer; font-size:13px }

/* app */
.app { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:16px; align-items:start }
.work { display:flex; flex-direction:column; gap:14px; min-width:0 }
.steps { display:flex; gap:6px; flex-wrap:wrap; font-size:12.5px }
.steps a { text-decoration:none; padding:5px 12px; border-radius:30px; background:var(--soft); color:var(--muted); font-weight:600 }
.steps a[aria-current="page"] { background:var(--accent); color:var(--surface) }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:12px; min-width:0 }
.panel h2 { font-size:16px; display:flex; align-items:center; gap:8px }
.panel h2 small { font-weight:400; color:var(--muted); font-size:12px; margin-left:auto }
.oneline { display:flex; gap:8px; flex-wrap:wrap }
.oneline textarea { flex:1 1 260px; min-width:0; border:1px solid var(--line); background:var(--bg); border-radius:14px; padding:10px 12px; font-size:16px; resize:vertical; min-height:52px }
.chips { display:flex; flex-wrap:wrap; gap:6px }
.chip { font-size:12px; padding:3px 10px; border-radius:20px; background:var(--soft); color:var(--text); border:1px solid var(--line) }
.chip.on { border-color:var(--pink); color:var(--pink); font-weight:700 }
.out { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; background:var(--bg); border:1px solid var(--line) }
.out p { flex:1; min-width:0; white-space:pre-wrap; overflow-wrap:anywhere }
.copy { flex:none; border:1px solid var(--line); background:var(--surface); border-radius:8px; font-size:11.5px; padding:3px 8px; cursor:pointer; color:var(--muted) }
.copy.done { color:var(--pink); border-color:var(--pink) }
.label { font-size:11px; letter-spacing:.12em; font-weight:700; color:var(--accent) }
.saved { font-size:12px; color:var(--muted) }
.changed { animation:flash 1.2s ease-out }
@keyframes flash { from { background:var(--soft); border-color:var(--pink) } }
@media (prefers-reduced-motion: reduce) { .changed { animation:none } }

/* chat */
.chat { position:sticky; top:12px; background:var(--chat); color:var(--chat-text); border-radius:22px; padding:16px; display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 24px); min-width:0 }
.chat header { display:flex; align-items:center; gap:8px; font-weight:700 }
.chat header span { font-weight:400; font-size:12px; color:var(--chat-muted); margin-left:auto }
.log { display:flex; flex-direction:column; gap:8px; overflow-y:auto; min-height:120px; flex:1 }
.msg { padding:9px 12px; border-radius:14px; font-size:14px; line-height:1.65; max-width:92%; background:var(--chat-bubble); white-space:pre-wrap; overflow-wrap:anywhere }
.msg.me { align-self:flex-end; background:var(--chat-me) }
.quick { display:flex; flex-wrap:wrap; gap:6px }
.quick button { border:1px solid #ffffff40; background:transparent; color:var(--chat-text); border-radius:20px; font-size:12.5px; padding:4px 10px; cursor:pointer }
.ask { display:flex; gap:6px }
.ask input { flex:1; min-width:0; border-radius:12px; border:1px solid #ffffff30; background:#ffffff12; color:var(--chat-text); padding:10px 12px; font-size:16px }
.ask button { border:0; border-radius:12px; padding:0 14px; background:linear-gradient(105deg,#bd237d,#7040d7); color:#fff; font-weight:700; cursor:pointer }
.chatfab { display:none }

/* video */
.drop { border:2px dashed var(--line); border-radius:18px; padding:22px; text-align:center; color:var(--muted); display:flex; flex-direction:column; gap:8px; align-items:center }
.frames { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px }
.frame { border-radius:12px; overflow:hidden; position:relative; aspect-ratio:16/10; background:var(--soft); border:2px solid transparent; cursor:pointer; padding:0 }
.frame img { width:100%; height:100%; object-fit:cover; transition:filter .3s }
.frame.blur img { filter:blur(9px) saturate(.8) }
.frame em { position:absolute; left:6px; bottom:4px; font-style:normal; font-size:11px; color:#fff; background:#0008; border-radius:6px; padding:0 6px; font-variant-numeric:tabular-nums }
.frame.pick { border-color:var(--pink) }
.mosaic { display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.mosaic-label { font-size:13px; font-weight:600 }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:30px; padding:3px; background:var(--soft); flex-wrap:wrap }
.seg button { border:0; background:transparent; border-radius:24px; padding:5px 12px; font-size:13px; cursor:pointer; color:var(--muted) }
.seg button[aria-pressed="true"] { background:var(--surface); color:var(--text); font-weight:700; box-shadow:0 2px 8px #0001 }
.facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; font-size:13px }
.facts div { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:8px 10px }
.facts b { display:block; font-size:17px; font-variant-numeric:tabular-nums }
.next-step { align-self:flex-start }

@media (max-width: 860px) {
  .entry, .login { grid-template-columns:minmax(0,1fr) }
  .entry .photo { aspect-ratio:4/3; order:-1 }
  .login .photo { display:none }
  .three { grid-template-columns:minmax(0,1fr) }
  .app { grid-template-columns:minmax(0,1fr) }
  .chat { position:fixed; left:0; right:0; bottom:0; top:auto; border-radius:22px 22px 0 0; max-height:72vh; z-index:20;
    padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
    padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); transform:translateY(100%); transition:transform .25s; box-shadow:0 -10px 40px #0004 }
  .chat.open { transform:none }
  .chatfab { display:inline-flex; position:fixed; right:max(16px, env(safe-area-inset-right, 0px)); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:19 }
  .frames { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .facts { grid-template-columns:minmax(0,1fr) }
  .top .right .hide-sm { display:none }
}