/* Production Create chooser. Every selector is namespaced so the existing Home/Explore cards and
   generator remain untouched. /create.html still owns the original generator state and actions;
   Create reuses Home's setting controls and moves only the live topic/action nodes into its form. */
.co-root {
  --co-bg:#0e0e11; --co-surface:#19171a; --co-deep:#101015; --co-text:#f3efe9;
  --co-muted:#938d97; --co-line:rgba(255,255,255,.095); --co-line-top:rgba(255,255,255,.155);
  --co-amber:#f5a623; --co-amber-bright:#ffd37a; --co-rose:#b34864; --co-purple:#7750a1;
  --co-ease:cubic-bezier(.22,.8,.3,1);
  position:relative; z-index:10; display:none; min-height:calc(100dvh - 61px); color:var(--co-text); font-family:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(80% 64% at 8% 0,rgba(122,65,40,.11),transparent 58%),radial-gradient(66% 58% at 93% 7%,rgba(91,69,133,.105),transparent 61%),#0e0e11;
}
html[data-custom-topic]:not([data-theme="light"]) {
  --bg:#0e0e11 !important; --text:#f2f0ec !important; --muted:#888899 !important; --muted2:#666677 !important;
  --border:rgba(255,255,255,.08) !important; --card:#222228 !important; --accent:#f59e0b !important;
  color-scheme:dark !important; background:#0e0e11 !important;
}
html[data-custom-topic]:not([data-theme="light"]) body { background:#0e0e11 !important; color:#f2f0ec; }
html[data-custom-topic]:not([data-mweb]) body > nav { position:sticky; top:0; z-index:50; }
/* All Create modes share Home's free-user Premium banner. */
html[data-custom-topic] #androidAppBanner { display:none !important; }
html[data-theme="light"][data-custom-topic] .co-root :is(input,textarea,select) { background-color:transparent !important; color:#4B4B4B !important; border-color:transparent !important; }
html[data-theme="light"][data-custom-topic] .co-root :is(input,textarea,select)::placeholder { color:#777777 !important; opacity:1; }
html[data-custom-topic] body .co-root { display:block; }
html[data-custom-topic] body .main:not(.compact) { display:none !important; }
html[data-custom-topic] body .disc-tabs-top { display:none !important; }
.co-root *,.co-root *::before,.co-root *::after { box-sizing:border-box; }
.co-root button,.co-root input,.co-root textarea { font:inherit; }
.co-root button { -webkit-tap-highlight-color:transparent; }

.co-mobile-header { display:none; }
.co-shell { width:min(1100px,calc(100% - 40px)); margin:0 auto; padding:52px 0 78px; }
.co-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:25px; }
.co-page-head > div { max-width:690px; }
.co-page-head h1 { margin:0; color:var(--co-text); font-size:clamp(32px,4vw,46px); font-weight:400; letter-spacing:-1.15px; line-height:1.03; }

.co-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:28px; }
.co-card { --co-glow:rgba(245,166,35,.1); position:relative; width:100%; min-width:0; min-height:500px; overflow:hidden; display:flex; flex-direction:column; padding:26px 26px 23px; border:1px solid var(--co-line); border-top-color:var(--co-line-top); border-radius:26px; outline:0; background:radial-gradient(94% 82% at 44% 8%,var(--co-glow),transparent 64%),linear-gradient(145deg,var(--co-surface),var(--co-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 4px 0 #08080b,0 25px 60px rgba(0,0,0,.3); cursor:pointer; isolation:isolate; transition:transform .22s var(--co-ease),border-color .22s,box-shadow .22s,filter .22s; }
.co-card::before { position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(116deg,rgba(255,255,255,.035),transparent 30%,transparent 70%,rgba(255,255,255,.018)); content:""; pointer-events:none; }
.co-card::after { position:absolute; inset:0; z-index:8; border:1px solid transparent; border-radius:inherit; content:""; pointer-events:none; transition:border-color .22s,box-shadow .22s; }
.co-card:hover { border-color:rgba(245,166,35,.28); filter:brightness(1.035); transform:translateY(-4px); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 0 #08080b,0 31px 68px rgba(0,0,0,.38); }
.co-card:has(.co-card-hit:active) { transform:translateY(1px); }
.co-card:has(.co-card-hit:focus-visible)::after { border-color:var(--co-amber-bright); box-shadow:0 0 0 3px rgba(245,166,35,.18) inset; }
.co-card.is-selected::after { border-color:rgba(255,211,122,.6); box-shadow:0 0 0 3px rgba(245,166,35,.09) inset; }
.co-card.is-setup { cursor:default; }
.co-card.is-setup:hover { filter:none; transform:none; }
.co-card-hit { position:absolute; inset:0; z-index:7; width:100%; height:100%; padding:0; border:0; border-radius:inherit; outline:0; background:transparent; color:inherit; cursor:pointer; }
.co-path-card { --co-glow:rgba(179,72,100,.13); aspect-ratio:1; align-self:start; }
.co-topic-card { --co-glow:rgba(119,80,161,.16); padding:27px 28px 23px; }
.co-card-head { position:relative; z-index:3; }
.co-card-head h2 { margin:0; color:#f1ece8; font-size:clamp(23px,2.45vw,32px); font-weight:400; letter-spacing:-.65px; line-height:1.06; }
.co-card-head p { max-width:410px; margin:8px 0 0; color:#9d97a0; font-size:10.5px; font-weight:560; line-height:1.42; }
.co-card.is-setup .co-card-head { padding-right:52px; }

.co-path-stage { position:relative; flex:1; min-height:0; display:grid; place-items:center; margin:-13px -14px -18px; }
#createPathScene { position:relative; top:4px; z-index:2; display:block; width:min(96%,330px); filter:drop-shadow(0 24px 19px rgba(0,0,0,.48)); animation:coPathFloat 4.4s ease-in-out infinite; transition:transform .45s var(--co-ease),filter .45s var(--co-ease); }
#createPathScene svg { display:block; width:100%; height:auto; overflow:visible; }
.co-path-card:hover #createPathScene { transform:translateY(-4px) scale(1.025); filter:drop-shadow(0 29px 23px rgba(0,0,0,.54)); }
@keyframes coPathFloat { 0%,100%{transform:translateY(0) rotate(-.3deg)} 50%{transform:translateY(-7px) rotate(.35deg)} }

.co-topic-stage { position:relative; flex:1; min-height:200px; display:grid; place-items:center; margin:-8px 0 -4px; }
.co-art-ground { position:absolute; bottom:5%; width:27%; height:15px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.62),transparent 72%); filter:blur(2px); }
#createTopicScene { position:relative; z-index:2; width:min(48%,238px); display:grid; place-items:center; animation:coFloat 4.2s ease-in-out infinite; filter:drop-shadow(0 21px 17px rgba(0,0,0,.46)); }
#createTopicScene svg { display:block; width:100%; height:auto; overflow:visible; }
@keyframes coFloat { 0%,100%{transform:translateY(0) rotate(-.35deg)} 50%{transform:translateY(-9px) rotate(.45deg)} }
.co-idea { position:absolute; z-index:3; display:flex; align-items:center; gap:7px; max-width:190px; padding:8px 10px; border:1px solid rgba(255,255,255,.09); border-top-color:rgba(255,255,255,.14); border-radius:11px; background:linear-gradient(180deg,rgba(41,39,46,.94),rgba(20,19,24,.94)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 3px 0 rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.26); color:#aaa4ad; font-size:8.5px; font-weight:670; line-height:1.2; white-space:nowrap; animation:coChipDrift 5s ease-in-out infinite; }
.co-idea::before { width:5px; height:5px; flex:0 0 auto; border-radius:50%; background:var(--co-chip,var(--co-amber)); box-shadow:0 0 9px color-mix(in srgb,var(--co-chip,var(--co-amber)) 65%,transparent); content:""; }
.co-idea-one { left:4%; top:29%; --co-chip:#4ec9b0; animation-delay:-1.2s; }
.co-idea-two { right:3%; top:18%; --co-chip:#c28cf0; animation-delay:-3.1s; }
.co-idea-three { right:4%; bottom:20%; --co-chip:#ffb54a; animation-delay:-.4s; }
@keyframes coChipDrift { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

.co-action { position:relative; z-index:4; min-height:62px; display:flex; align-items:center; gap:11px; padding:10px 11px 10px 13px; border:1px solid rgba(245,166,35,.21); border-top-color:rgba(255,218,143,.34); border-radius:18px; background:radial-gradient(110% 150% at 0 0,rgba(245,166,35,.13),transparent 62%),linear-gradient(180deg,#29272c,#17171c 66%,#101014); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.48),0 3px 0 #08080b,0 10px 20px rgba(0,0,0,.35); }
.co-action-scene { width:48px; height:48px; flex:0 0 auto; display:grid; place-items:center; filter:drop-shadow(0 8px 7px rgba(0,0,0,.46)); }
.co-action-scene svg { display:block; width:100%; height:100%; overflow:visible; }
.co-action-copy { min-width:0; padding-left:11px; border-left:3px solid var(--co-amber); }
.co-action-copy strong { display:block; overflow:hidden; color:#eee9eb; font-size:11.5px; font-weight:760; text-overflow:ellipsis; white-space:nowrap; }
.co-action-arrow { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; margin-left:auto; border:1px solid rgba(245,166,35,.31); border-top-color:rgba(255,218,143,.46); border-radius:50%; background:radial-gradient(100% 130% at 30% 0,rgba(245,166,35,.16),transparent 58%),linear-gradient(180deg,#302c2f,#1a181c 62%,#111115); box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -2px 0 rgba(0,0,0,.5),0 3px 0 #08080b,0 7px 14px rgba(0,0,0,.32); color:#ffc35d; transition:transform .22s var(--co-ease),border-color .22s; }
.co-action-arrow svg { width:15px; height:15px; }
.co-card:hover .co-action-arrow { border-color:rgba(245,166,35,.57); transform:translateY(2px); }
.co-path-action { z-index:9; pointer-events:none; }
/* Split bottom strip: build a new path on the left, jump to saved paths on the right. */
.co-path-actions { position:relative; z-index:9; display:flex; gap:10px; }
.co-path-actions .co-action { flex:1; min-width:0; }
.co-action-half .co-action-copy strong { white-space:normal; line-height:1.2; }
.co-action-half:last-child .co-action-copy { border-left-color:rgba(245,166,35,.55); }
.co-path-build-hit { position:absolute; inset:0; z-index:3; width:100%; height:100%; padding:0; border:0; border-radius:inherit; outline:0; background:transparent; cursor:pointer; pointer-events:auto; }
.co-path-build-hit:focus-visible { outline:2px solid var(--co-amber-bright); outline-offset:3px; }
.co-path-action > :not(.co-path-build-hit) { position:relative; z-index:2; pointer-events:none; }

.co-topic-setup,.co-path-setup { position:relative; z-index:12; min-height:0; flex:1; display:none; align-content:start; gap:13px; padding:28px 0 3px; }
.co-topic-card.is-setup .co-card-hit,.co-topic-card.is-setup .co-topic-stage,.co-topic-card.is-setup .co-topic-action,.co-path-card.is-setup .co-card-hit,.co-path-card.is-setup .co-path-stage,.co-path-card.is-setup .co-action { display:none; }
.co-topic-card.is-setup .co-topic-setup { display:flex; flex-direction:column; animation:coSetupEnter .32s var(--co-ease) both; }
.co-path-card.is-setup .co-path-setup { display:grid; animation:coSetupEnter .32s var(--co-ease) both; }
@keyframes coSetupEnter { from{opacity:0;transform:translateY(10px) scale(.985)} to{opacity:1;transform:none} }
.co-setup-close { position:absolute; top:-51px; right:0; width:36px; height:36px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.09); border-top-color:rgba(255,255,255,.14); border-radius:11px; background:linear-gradient(180deg,#29272d,#17161b); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 0 rgba(0,0,0,.36); color:#aaa3ad; cursor:pointer; }
.co-setup-close:hover { border-color:rgba(255,194,92,.3); color:#f0e9ef; }
.co-setup-close svg { width:15px; height:15px; }

.co-path-setup { gap:13px; grid-template-rows:auto minmax(0,1fr); padding:22px 0 3px; }
.co-path-prompt { max-width:320px; color:#c8c0c4; font-size:13px; font-weight:720; line-height:1.4; }
.co-path-field { position:relative; min-height:154px; display:flex; border:1px solid rgba(245,166,35,.28); border-top-color:rgba(255,217,139,.42); border-radius:19px; background:radial-gradient(90% 110% at 8% 0,rgba(245,166,35,.11),transparent 62%),linear-gradient(180deg,rgba(43,35,35,.97),rgba(18,17,21,.99)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -2px 0 rgba(0,0,0,.42),0 12px 28px rgba(0,0,0,.28); transition:border-color .2s,box-shadow .2s; }
.co-path-field:focus-within { border-color:rgba(255,194,92,.65); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 3px rgba(245,166,35,.09),0 15px 30px rgba(0,0,0,.31); }
.co-path-field.has-error { border-color:rgba(226,91,105,.72); }
.co-path-field textarea { width:100%; min-height:100%; resize:none; padding:16px 17px 68px; border:0; outline:0; background:transparent; color:#f3edf1; font:600 13px/1.48 Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.co-path-field textarea::placeholder { color:#98919b; opacity:1; }
.co-path-submit { position:absolute; right:10px; bottom:10px; min-width:126px; min-height:43px; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 14px; border:1px solid rgba(245,166,35,.4); border-top-color:rgba(255,224,158,.57); border-radius:14px; background:linear-gradient(145deg,#a55e20,#6e3b17 58%,#3a2113); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.38),0 4px 0 #110b09,0 8px 17px rgba(0,0,0,.3); color:#ffe8b4; cursor:pointer; font-size:11px; font-weight:820; }
.co-path-submit:hover { border-color:rgba(255,214,128,.7); transform:translateY(-1px); }
.co-path-submit:active { transform:translateY(2px); }
.co-path-submit svg { width:18px; height:18px; }

.co-topic-search { min-width:0; height:62px; display:flex; align-items:center; gap:12px; padding:8px 9px 8px 16px; border:1px solid rgba(179,137,214,.26); border-top-color:rgba(214,184,237,.38); border-radius:18px; background:linear-gradient(180deg,rgba(40,36,46,.96),rgba(18,17,22,.98)); box-shadow:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -2px 0 rgba(0,0,0,.4),0 10px 25px rgba(0,0,0,.26); transition:border-color .2s,box-shadow .2s; }
.co-topic-search:focus-within { border-color:rgba(255,194,92,.62); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 3px rgba(245,166,35,.09),0 13px 28px rgba(0,0,0,.3); }
.co-topic-search.has-error { border-color:rgba(226,91,105,.72); }
.co-search-icon { width:20px; height:20px; flex:0 0 auto; color:#cba9e8; }
.co-topic-search #topicInput { min-width:0 !important; height:auto !important; flex:1; padding:0 !important; border:0 !important; outline:0 !important; background:transparent !important; box-shadow:none !important; color:#f3edf1 !important; font:600 14px/1.3 Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important; text-align:left !important; }
.co-topic-search #topicInput::placeholder { color:#98919b !important; opacity:1; }
.co-topic-search #genBtn { position:relative; width:43px !important; min-width:43px !important; max-width:43px !important; height:43px !important; min-height:43px !important; flex:0 0 43px; margin:0 !important; padding:0 !important; border:1px solid rgba(245,166,35,.4) !important; border-top-color:rgba(255,224,158,.57) !important; border-radius:14px !important; background:linear-gradient(145deg,#a55e20,#6e3b17 58%,#3a2113) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.38),0 4px 0 #110b09,0 8px 17px rgba(0,0,0,.3) !important; color:transparent !important; font-size:0 !important; }
.co-topic-search #genBtn::after { position:absolute; top:50%; left:50%; width:18px; height:18px; background:#ffe2a0; content:""; transform:translate(-50%,-50%); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat; }
.co-topic-search #genBtn:disabled { opacity:.58; cursor:wait; }
.co-topic-controls { position:relative; z-index:20; min-width:0; margin-top:auto; }
.co-topic-controls .lh-settings { width:100%; margin:0; }
.co-topic-setup > .status,.co-topic-setup > .error-box { width:100%; margin:0; }

.co-toast { position:fixed; left:50%; bottom:25px; z-index:80; min-width:250px; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border:1px solid rgba(255,211,122,.22); border-radius:13px; background:rgba(22,20,24,.92); box-shadow:0 15px 38px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.08); color:#d8d2d8; font-size:11px; font-weight:680; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:opacity .2s,transform .3s var(--co-ease); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); }
.co-toast.show { opacity:1; transform:translate(-50%,0); }
.co-toast svg { width:14px; height:14px; color:#ffc15b; }

/* Production mweb is the same semantic DOM—not the concept's phone iframe. */
html[data-mweb][data-mpage="gen"][data-custom-topic] body > nav { display:none !important; }
html[data-mweb][data-mpage="gen"][data-custom-topic] body { min-height:100dvh; background:#0a0a0e; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-root { min-height:100dvh; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-mobile-header { position:sticky; top:0; z-index:60; height:59px; display:flex; align-items:center; padding:0 16px 7px; border-bottom:1px solid rgba(255,255,255,.065); background:linear-gradient(180deg,rgba(16,16,20,.98),rgba(16,16,20,.92)); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.co-mobile-back { position:relative; isolation:isolate; width:44px; height:44px; display:grid; place-items:center; overflow:hidden; flex:0 0 auto; padding:0; border:1px solid rgba(255,255,255,.13); border-radius:14px; background:radial-gradient(circle at 22% 5%,rgba(224,200,171,.13),transparent 66%),linear-gradient(145deg,#312d35 0%,#211e25 56%,#111116 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -2px 0 rgba(0,0,0,.25),0 3px 0 #08080b,0 9px 17px rgba(0,0,0,.38); color:#e8dee7; cursor:pointer; transition:transform .16s var(--co-ease),filter .16s var(--co-ease),box-shadow .16s var(--co-ease); }
.co-mobile-back::before { position:absolute; z-index:0; width:27px; height:27px; border:1px solid rgba(255,255,255,.17); border-radius:50%; background:linear-gradient(145deg,#5b545f 0%,#353039 52%,#1b191e 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.38),0 2px 0 #09090c,0 5px 8px rgba(0,0,0,.34); content:""; }
.co-mobile-back svg { position:relative; z-index:1; width:15px; height:15px; filter:drop-shadow(0 1.4px 0 rgba(0,0,0,.78)); }
.co-mobile-back:hover { filter:brightness(1.06); transform:translateY(-1px); }
.co-mobile-back:active { filter:brightness(.96); transform:translateY(2px) scale(.97); }
.co-mobile-back:focus-visible { outline:2px solid #ffc25b; outline-offset:3px; }
.co-mobile-title { position:absolute; left:50%; transform:translateX(-50%); color:#F2F0EC; font-size:16px; font-weight:820; letter-spacing:-.35px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-shell { width:auto; padding:19px 16px 43px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-page-head { display:none; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-page-head h1 { font-size:22px; font-weight:520; letter-spacing:-.55px; line-height:1.18; text-align:center; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-grid { grid-template-columns:minmax(0,1fr); gap:14px; margin-top:17px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-card { min-height:354px; height:354px; padding:19px 18px 15px; border-radius:25px; box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 4px 0 #08080b,0 18px 36px rgba(0,0,0,.28); }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-path-card { aspect-ratio:auto; align-self:stretch; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-card:hover { filter:none; transform:none; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-card:has(.co-card-hit:active) { transform:scale(.992); }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-card-head h2 { font-size:25px; font-weight:520; letter-spacing:-.55px; line-height:1.08; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-card-head p { max-width:260px; margin-top:5px; font-size:11.5px; font-weight:580; line-height:1.35; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-path-stage { position:absolute; z-index:1; top:56px; left:50%; width:270px; height:220px; margin:0; display:block; transform:translateX(-50%); }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-path-card.is-setup .co-path-stage { display:none; }
html[data-mweb][data-mpage="gen"][data-custom-topic] #createPathScene { top:0; width:270px; filter:drop-shadow(0 20px 17px rgba(0,0,0,.46)); }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-topic-stage { position:absolute; top:70px; left:50%; width:260px; height:210px; min-height:0; margin:0; transform:translateX(-50%); }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-art-ground,html[data-mweb][data-mpage="gen"][data-custom-topic] .co-idea { display:none; }
html[data-mweb][data-mpage="gen"][data-custom-topic] #createTopicScene { width:190px; filter:drop-shadow(0 16px 14px rgba(0,0,0,.44)); }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-action { position:absolute; right:14px; bottom:14px; left:14px; z-index:11; min-height:57px; padding:9px 10px 9px 11px; border-radius:17px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-path-actions { position:absolute; right:14px; bottom:14px; left:14px; z-index:11; display:flex; gap:9px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-path-actions .co-action { position:relative; right:auto; bottom:auto; left:auto; flex:1; min-width:0; padding:9px 8px 9px 9px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-path-actions .co-action-copy { padding-left:7px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-action-scene { width:45px; height:45px; margin:-4px -2px -4px -3px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-action-copy { padding-left:10px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-action-copy strong { font-size:12px; font-weight:800; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-action-arrow { width:37px; height:37px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-topic-setup,html[data-mweb][data-mpage="gen"][data-custom-topic] .co-path-setup { margin-top:13px; padding:0; gap:9px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-card.is-setup .co-card-head { padding-right:0; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-setup-close { top:-65px; width:44px; height:44px; border-radius:13px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-path-setup { margin-top:16px; gap:10px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-path-prompt { padding-right:46px; color:#e8e1e5; font-size:13px; font-weight:750; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-path-field { min-height:104px; display:block; padding:11px 12px; border-radius:15px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-path-field textarea { height:80px; min-height:80px; padding:0; font-size:16px; line-height:1.45; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-path-submit { position:static; min-width:140px; min-height:48px; margin:10px 0 0 auto; padding:0 17px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-topic-search { height:56px; gap:9px; padding:5px 5px 5px 12px; border-radius:15px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-search-icon { width:18px; height:18px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-topic-search #topicInput { font-size:16px !important; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-topic-search #genBtn { width:44px !important; min-width:44px !important; max-width:44px !important; height:44px !important; min-height:44px !important; flex-basis:44px; }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-toast { right:22px; bottom:24px; left:22px; min-width:0; transform:translateY(13px); }
html[data-mweb][data-mpage="gen"][data-custom-topic] .co-toast.show { transform:translateY(0); }

html[data-theme="light"][data-custom-topic] .co-root { color-scheme:light; }

@media (max-width:900px) and (min-width:701px) {
  .co-shell { width:min(100% - 28px,840px); padding-top:42px; }
  .co-grid { gap:24px; }
  .co-card { min-height:480px; padding:22px 21px 19px; }
  .co-path-card { aspect-ratio:auto; align-self:stretch; }
  .co-topic-card { padding:23px 22px 19px; }
  .co-idea { display:none; }
  #createPathScene { width:min(94%,288px); }
  #createTopicScene { width:min(62%,220px); }
}
@media (prefers-reduced-motion:reduce) {
  .co-root *,.co-root *::before,.co-root *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ── "Build my path" blocking loader (Study's uploader look, theme-correct) ──
   The Create surface forces dark via html[data-custom-topic], so the dark values are what
   ships today; the light block keeps the card honest if that gate is ever lifted. */
.co-path-loader { position:fixed; inset:0; z-index:340; display:none; place-items:center; padding:24px;
  background:rgba(8,6,3,.62); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.co-path-loader.open { display:grid; }
.co-loader-card { position:relative; overflow:hidden; width:100%; max-width:400px; text-align:center;
  background:radial-gradient(120% 90px at 50% 0,rgba(245,158,11,.12),transparent 70%),#0A0A0E;
  border:1px solid rgba(255,255,255,.12); border-radius:24px; padding:34px 30px 30px; color:#f3efe9;
  box-shadow:0 34px 90px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.05); }
html[data-theme="light"] .co-loader-card { background:radial-gradient(120% 90px at 50% 0,rgba(245,158,11,.12),transparent 70%),#FFF;
  border-color:rgba(0,0,0,.09); color:#111; box-shadow:0 24px 60px rgba(40,30,10,.18); }
/* Ara (grad cap, canon face: round eyes, no brows, no mouth) floats while the path builds. */
.co-loader-ara { width:84px; margin:0 auto 14px; animation:coAraFloat 3.4s ease-in-out infinite; }
.co-loader-ara svg { display:block; width:100%; height:auto; overflow:visible; }
@keyframes coAraFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.co-ara-eyes { transform-box:fill-box; transform-origin:center; animation:coAraBlink 4.6s ease-in-out infinite; }
@keyframes coAraBlink { 0%,91%,100%{transform:scaleY(1)} 94%{transform:scaleY(.08)} }
.co-ara-tass { transform-box:fill-box; transform-origin:top left; animation:coAraTass 5.2s ease-in-out infinite; }
@keyframes coAraTass { 0%,86%,100%{transform:rotate(0)} 92%{transform:rotate(6deg)} 96%{transform:rotate(-3deg)} }
/* Done: the signature close — eyes shut, sparkles pop as the modal hands over.
   ⛔ A HELD closed eye must be DRAWN lids, not a scaled-down eye: scaleY on the eye group
   renders ~70% closed (fill-box origin quirk we hit before) and a squashed white bar reads
   as a rendering fault anyway (see ara-intro-concept.html). Swap geometry instead. */
.co-ara-lids { opacity:0; }
.co-path-loader.done .co-ara-eyes { display:none; }
.co-path-loader.done .co-ara-lids { opacity:1; }
.co-ara-spk { transform-box:fill-box; transform-origin:center; opacity:0; }
.co-path-loader.done .co-ara-spk { animation:coAraSpk .52s ease both; }
.co-path-loader.done .co-ara-spk.s2 { animation-delay:.16s; }
@keyframes coAraSpk { 0%{transform:scale(0) rotate(-25deg);opacity:0} 45%{transform:scale(1) rotate(0);opacity:1} 100%{transform:scale(.25) rotate(18deg);opacity:0} }
.co-loader-title { font-size:20px; font-weight:700; letter-spacing:.005em; }
.co-loader-sub { font-size:12.5px; color:#938d97; margin-top:7px; min-height:16px; }
html[data-theme="light"] .co-loader-sub { color:#777777; }
.co-loader-bar { position:relative; height:7px; border-radius:6px; background:rgba(255,255,255,.12); overflow:hidden; margin-top:22px; }
html[data-theme="light"] .co-loader-bar { background:rgba(0,0,0,.08); }
/* Standard indeterminate bar: one orange segment loops across the track — exits right,
   re-enters left. No shimmer, no pulse. */
.co-loader-bar span { position:absolute; top:0; bottom:0; left:0; width:38%; border-radius:6px;
  background:linear-gradient(90deg,#F59E0B,#FB923C);
  animation:coBarLoop 1.5s cubic-bezier(.45,.15,.55,.85) infinite; }
@keyframes coBarLoop { 0%{transform:translateX(-105%)} 100%{transform:translateX(370%)} }
.co-loader-err { margin-top:18px; display:none; }
.co-loader-err.show { display:block; }
.co-loader-errmsg { font-size:13px; color:#e2b7b7; margin-bottom:12px; }
html[data-theme="light"] .co-loader-errmsg { color:#8a3a3a; }
.co-loader-close { font:inherit; font-size:13px; font-weight:700; padding:9px 22px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:inherit; }
html[data-theme="light"] .co-loader-close { border-color:rgba(0,0,0,.14); background:rgba(0,0,0,.05); }

/* mweb Create parity with the native app (2026-09-01): the bar IS the page. */
html[data-mweb][data-custom-topic]:not([data-theme="light"]) body > nav { background:#0e0e11 !important; border-bottom:0 !important; box-shadow:none !important; }
html[data-theme="light"][data-mweb][data-custom-topic] body > nav { background:#FFFFFF !important; border-bottom:0 !important; box-shadow:none !important; }
html[data-theme="light"][data-mweb][data-custom-topic] .co-mobile-back { color:#4B4B4B; }
html[data-mweb][data-custom-topic] .co-mobile-back { border:0; background:transparent; box-shadow:none; width:40px; height:40px; color:#F2F0EC; }
html[data-mweb][data-custom-topic] .co-mobile-back::before { content:none; }
html[data-mweb][data-custom-topic] .co-mobile-back svg { filter:none; }
html[data-mweb][data-custom-topic] .co-mobile-back:hover { transform:none; filter:none; }

/* ── Create in light mode (2026-09-01): the SAME Snow/Polar palette the site light theme
   uses (theme.css): #FFFFFF ground, #F7F7F7 surfaces, #E5E5E5 hairlines, #4B4B4B ink,
   #777777 muted, #B45309 amber ink. The page ground is flat white and the nav is left
   untouched so both match generate.html exactly. Dark stays byte-identical through the
   :not([data-theme="light"]) guards above. ── */
html[data-theme="light"] .co-root {
  --co-surface:#F7F7F7; --co-deep:#F7F7F7; --co-text:#4B4B4B;
  --co-muted:#777777; --co-line:#E5E5E5; --co-line-top:#E5E5E5;
  color:var(--co-text);
  background:#FFFFFF;
}
html[data-theme="light"] html[data-theme="light"] html[data-theme="light"] .co-card { box-shadow:0 3px 0 rgba(0,0,0,.05),0 16px 36px rgba(0,0,0,.08); }
html[data-theme="light"] .co-card::before { background:none; }
html[data-theme="light"] .co-card:hover { filter:none; box-shadow:0 4px 0 rgba(0,0,0,.05),0 20px 44px rgba(0,0,0,.10); }
html[data-theme="light"] .co-card-head h2 { color:#4B4B4B; }
html[data-theme="light"] .co-card-head p { color:#777777; }
html[data-theme="light"] .co-idea { border-color:#E5E5E5; border-top-color:#E5E5E5; background:#FFFFFF; box-shadow:0 2px 0 rgba(0,0,0,.04),0 8px 18px rgba(0,0,0,.07); color:#777777; }
html[data-theme="light"] .co-art-ground { background:radial-gradient(ellipse,rgba(0,0,0,.16),transparent 72%); }
html[data-theme="light"] .co-action { border-color:#E5E5E5; border-top-color:#E5E5E5; background:#FFFFFF; box-shadow:0 2px 0 rgba(0,0,0,.04),0 8px 16px rgba(0,0,0,.06); }
html[data-theme="light"] .co-action-copy strong { color:#4B4B4B; }
html[data-theme="light"] .co-action-arrow { border-color:#E5E5E5; background:#F7F7F7; box-shadow:none; color:#B45309; }
html[data-theme="light"] .co-setup-close { border-color:#E5E5E5; background:#FFFFFF; box-shadow:none; color:#777777; }
html[data-theme="light"] .co-setup-close:hover { color:#4B4B4B; }
html[data-theme="light"] .co-path-prompt { color:#4B4B4B; }
html[data-theme="light"] .co-path-field { border-color:#E5E5E5; border-top-color:#E5E5E5; background:#FFFFFF; box-shadow:0 6px 18px rgba(0,0,0,.05); }
html[data-theme="light"] .co-path-field:focus-within { border-color:rgba(245,158,11,.55); box-shadow:0 0 0 3px rgba(245,158,11,.10),0 8px 20px rgba(0,0,0,.06); }
html[data-theme="light"] .co-path-field textarea { color:#4B4B4B; }
html[data-theme="light"] .co-path-field textarea::placeholder { color:#777777; }
html[data-theme="light"] .co-path-submit { border-color:rgba(180,83,9,.35); border-top-color:rgba(180,83,9,.35); background:linear-gradient(180deg,#FBBF24,#F59E0B); box-shadow:0 4px 14px rgba(245,158,11,.30); color:#2B1A02; }
html[data-theme="light"] .co-path-submit:hover { border-color:rgba(180,83,9,.5); }
html[data-theme="light"] .co-topic-search { border-color:#E5E5E5; border-top-color:#E5E5E5; background:#FFFFFF; box-shadow:0 6px 18px rgba(0,0,0,.05); }
html[data-theme="light"] .co-topic-search:focus-within { border-color:rgba(245,158,11,.55); box-shadow:0 0 0 3px rgba(245,158,11,.10),0 8px 20px rgba(0,0,0,.06); }
html[data-theme="light"] .co-search-icon { color:#777777; }
html[data-theme="light"] .co-topic-search #topicInput { color:#4B4B4B !important; }
html[data-theme="light"] .co-topic-search #topicInput::placeholder { color:#777777 !important; }
html[data-theme="light"] .co-topic-search #genBtn { border-color:rgba(180,83,9,.35) !important; border-top-color:rgba(180,83,9,.35) !important; background:linear-gradient(180deg,#FBBF24,#F59E0B) !important; box-shadow:0 4px 14px rgba(245,158,11,.30) !important; }
html[data-theme="light"] .co-topic-search #genBtn::after { background:#2B1A02; }
html[data-theme="light"] .co-mobile-title { color:#4B4B4B; }
/* mweb-specific dark values (higher specificity than the generic light rules above). */
html[data-theme="light"][data-mweb][data-mpage="gen"][data-custom-topic] .co-card { box-shadow:0 3px 0 rgba(0,0,0,.05),0 14px 30px rgba(0,0,0,.08); }
html[data-theme="light"][data-mweb][data-mpage="gen"][data-custom-topic] .co-mobile-header { border-bottom:0; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.92)); }
html[data-theme="light"][data-mweb][data-mpage="gen"][data-custom-topic] .co-path-prompt { color:#4B4B4B; }
html[data-theme="light"][data-mweb][data-mpage="gen"][data-custom-topic] #createPathScene { filter:drop-shadow(0 14px 12px rgba(0,0,0,.16)); }
html[data-theme="light"][data-mweb][data-mpage="gen"][data-custom-topic] #createTopicScene { filter:drop-shadow(0 12px 10px rgba(0,0,0,.16)); }

/* Reserve each illustration’s square while the scene scripts load. Simple path and search
   silhouettes carry the shimmer, then disappear as soon as the inline SVG is inserted. */
.co-root :is(#createPathScene,#createTopicScene,#createTopicActionScene):empty {
  position:relative; aspect-ratio:1; overflow:hidden;
  -webkit-mask:var(--co-art-mask) center / contain no-repeat;
  mask:var(--co-art-mask) center / contain no-repeat;
  background:color-mix(in srgb,var(--co-muted) 22%,transparent);
  animation:none !important; filter:none !important; transition:none;
}
.co-root #createPathScene:empty { --co-art-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M15%2088%2040%2075%2065%2088V96L40%20109%2015%2096ZM43%2061%2064%2050%2085%2061V68L64%2079%2043%2068ZM69%2038%2088%2028%20107%2038V44L88%2054%2069%2044Z%22%2F%3E%3C%2Fsvg%3E"); }
.co-root :is(#createTopicScene,#createTopicActionScene):empty { --co-art-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2248%22%20r%3D%2227%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%2213%22%2F%3E%3Cpath%20d%3D%22M71%2070%2094%2094%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%2215%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.co-root :is(#createPathScene,#createTopicScene,#createTopicActionScene):empty::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--co-muted) 22%,transparent),transparent);
  transform:translateX(-100%); animation:coArtLoading 1.4s ease-in-out infinite;
}
@keyframes coArtLoading { to { transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce) {
  .co-root :is(#createPathScene,#createTopicScene,#createTopicActionScene):empty::after { animation:none !important; }
}

/* ── Path-lesson handoff veil (2026-09-01): while create.html executes a map action, the page
   ground is hidden behind the app's standard indeterminate ring — the hop reads as one quiet
   loading beat, not a visit to Create. (The Ara loader remains the path-BUILD surface.) ── */
html[data-path-handoff] .co-root { visibility:hidden; }
/* Always DARK, both themes: the veil hands into lesson.html, which is a dark surface — this is
   the same beat the For You/Explore launch shows. Ground matches lesson.html's #0c0c10 stamp. */
.co-handoff-veil { position:fixed; inset:0; z-index:340; display:none; place-items:center; background:#0c0c10; }
.co-handoff-veil.open { display:grid; }
.co-handoff-veil i { position:fixed; left:50vw; top:50vh; width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%; border:3px solid rgba(255,255,255,.12); border-top-color:#F59E0B; animation:coHandoffSpin .7s linear infinite; animation-delay:var(--lrn-spin-sync,0ms); }
@keyframes coHandoffSpin { to { transform:rotate(360deg); } }