:root{
  --night:#1c2246; --deep:#141936; --mid:#37468a; --chalk:#faf4e1; --moon:#fff0b4; --bubble:#a0e6ff; --roof:#d278a0;
  --bg:var(--night); --bg2:var(--deep); --ink:var(--chalk); --soft:#c9cbe6; --line:rgba(160,230,255,.35); --field:#232a55;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg:#e9ebf7; --bg2:#dfe2f3; --ink:#1c2246; --soft:#4a5080; --line:rgba(55,70,138,.35); --field:#ffffff; } }
:root[data-theme="light"]{ --bg:#e9ebf7; --bg2:#dfe2f3; --ink:#1c2246; --soft:#4a5080; --line:rgba(55,70,138,.35); --field:#ffffff; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 Nunito,"Trebuchet MS",system-ui,sans-serif}
h1,h2,h3,.hand{font-family:"Patrick Hand","Comic Sans MS",cursive;font-weight:400;line-height:1.15}
h1{font-size:clamp(2.4rem,7vw,4.2rem);margin:0 0 .4rem}
h2{font-size:clamp(1.8rem,4.5vw,2.6rem);margin:0 0 .6rem}
h3{font-size:1.5rem;margin:0 0 .3rem}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
button,.btn{font:800 1rem Nunito,system-ui,sans-serif;border:0;border-radius:999px;padding:.85rem 1.5rem;cursor:pointer;background:var(--moon);color:#1c2246}
button.ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
button:focus-visible,input:focus-visible,.chip:focus-visible{outline:3px solid var(--bubble);outline-offset:2px}
button[disabled]{opacity:.5;cursor:not-allowed}
header{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-family:"Patrick Hand",cursive;font-size:1.6rem;display:flex;align-items:center;gap:.5rem}
.logo i{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--bubble);display:inline-block}
.hero p.lede{font-size:1.15rem;color:var(--soft);max-width:34ch}
.namebox{display:flex;gap:10px;flex-wrap:wrap;margin:1.4rem 0 .6rem}
input,select,textarea{font:inherit;color:var(--ink);background:var(--field);border:2px solid var(--line);border-radius:14px;padding:.8rem 1rem;width:100%}
.namebox input{flex:1 1 200px;width:auto}
.price{font-size:.95rem;color:var(--soft)}
.cover{width:100%;aspect-ratio:1;border-radius:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);display:block;background:var(--night)}
section.panel{display:none;padding:10px 0 70px}
section.panel.on{display:block}
.progress{display:flex;gap:6px;margin:0 0 26px}
.progress span{flex:1;height:6px;border-radius:6px;background:var(--line)}
.progress span.fill{background:var(--bubble)}
.q{max-width:640px}
.summary{border:2px dashed var(--line);border-radius:18px;padding:22px}
.q label{display:block;font-weight:600;margin:1rem 0 .4rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:.7rem 0}
.chip{border:2px solid var(--line);background:transparent;color:var(--ink);font:600 .95rem Nunito,sans-serif;padding:.45rem .9rem;border-radius:999px;cursor:pointer}
.chip.sel{background:var(--bubble);color:#1c2246;border-color:var(--bubble)}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:42px;height:42px;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:0}
.sw.sel{border-color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nav{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hint{color:var(--soft);font-size:.95rem;margin:.2rem 0 0}
.err{color:#ff9a9a;font-size:.9rem;min-height:1.2em;margin:.3rem 0 0}
.making{text-align:center;padding:60px 0}
.making .orb{width:120px;height:120px;border-radius:50%;border:4px solid var(--bubble);margin:0 auto 24px;animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.making .orb{animation:none}}
.book{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:36px;align-items:start}.book>div{min-width:0}
.pager{display:flex;align-items:center;gap:12px;margin-top:14px}
.pager span{flex:1;text-align:center;color:var(--soft);font-size:.95rem}
.thumbs{display:flex;gap:6px;overflow-x:auto;padding:12px 0}
.thumbs canvas{width:64px;height:64px;border-radius:6px;cursor:pointer;opacity:.6;flex:none}
.thumbs canvas.cur{opacity:1;outline:2px solid var(--bubble)}
.summary ul{padding-left:1.1rem;margin:.6rem 0 1rem;color:var(--soft)}
.total{display:flex;justify-content:space-between;font-weight:800;font-size:1.2rem;border-top:2px dashed var(--line);padding-top:12px;margin-top:12px}
.done{text-align:center;max-width:560px;margin:0 auto;padding:40px 0}
.orders table{width:100%;border-collapse:collapse;font-size:.92rem}
.orders th,.orders td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}
.tablewrap{overflow-x:auto}
@media (max-width:760px){.book{grid-template-columns:minmax(0,1fr)}.row2{grid-template-columns:1fr}}
.small{padding:.45rem .9rem;font-size:.9rem}
.prose p{margin:.2rem 0 .9rem}.prose h3{margin:1.2rem 0 .3rem}
.founder{font-size:.95rem;color:var(--soft);margin:.4rem 0 0}.founder a{cursor:pointer}
.agree{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.95rem}.agree input{width:auto;margin-top:4px}
.banner{background:var(--mid);color:#faf4e1;text-align:center;padding:8px 14px;font-weight:600;font-size:.95rem;border-radius:0 0 12px 12px}
#dash{max-width:none}
.dhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.dtabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:16px;border-bottom:2px dashed var(--line)}
.dtabs button{flex:none;background:transparent;color:var(--ink);border:2px solid var(--line);padding:.45rem .9rem;font-size:.9rem}
.dtabs button.cur{background:var(--bubble);color:#1c2246;border-color:var(--bubble)}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.card{border:2px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--bg2);min-width:0}
.card .n{font-size:1.7rem;font-weight:800;line-height:1.2}.card .l{color:var(--soft);font-size:.88rem}
.two{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:18px}
.dt{width:100%;border-collapse:collapse;font-size:.92rem}.dt th,.dt td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.dt th{color:var(--soft);font-weight:600}.dt td.r,.dt th.r{text-align:right;white-space:nowrap}.dt tr.tot td{font-weight:800;border-top:2px solid var(--line)}
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:700;background:var(--line);color:var(--ink);white-space:nowrap}
.pill.good{background:#6fcf97;color:#10321f}.pill.warn{background:#ffdc8c;color:#3d2c00}.pill.bad{background:#ff9a9a;color:#3a0a0a}
.board{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.col{background:var(--bg2);border-radius:16px;padding:10px;min-width:0}.col h3{font-size:1.2rem;display:flex;justify-content:space-between}
.item{background:var(--field);border:2px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:8px;cursor:pointer}
.item b{display:block}.item small{color:var(--soft)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}.toolbar select{width:auto}
.bar{height:10px;border-radius:10px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;background:var(--bubble)}
.detail{display:grid;gap:18px;grid-template-columns:minmax(0,420px) minmax(0,1fr)}
.pagetext{margin-top:10px}.pagetext label{font-weight:600;font-size:.9rem;margin:.6rem 0 .2rem;display:block}
.hist{font-size:.85rem;color:var(--soft);padding-left:1rem}
.modal{position:fixed;inset:0;background:rgba(10,12,30,.6);display:flex;align-items:flex-start;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 40px) 16px 40px;overflow-y:auto;z-index:10}
.modal[hidden]{display:none}.mbox{background:var(--bg);border-radius:18px;padding:20px;width:100%;max-width:520px}
.mbox label{display:block;font-weight:600;margin:.8rem 0 .3rem}
.check{display:flex;gap:10px;align-items:center;padding:6px 0}.check input{width:auto}
.check.done span{text-decoration:line-through;color:var(--soft)}
@media (max-width:760px){.detail{grid-template-columns:minmax(0,1fr)}}

/* ---------- Customer site polish ---------- */
html.site{background:#141936}
body.site{background:
  radial-gradient(1200px 600px at 80% -10%,rgba(90,110,210,.35),transparent 60%),
  radial-gradient(900px 500px at -10% 30%,rgba(160,230,255,.08),transparent 60%),
  linear-gradient(180deg,#171c3d 0,#1c2246 900px,#161b3a 100%);min-height:100vh}
body.site::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 120px,#fff,transparent),radial-gradient(1.5px 1.5px at 160px 60px,#fff0b4,transparent),radial-gradient(1px 1px at 230px 190px,#fff,transparent),radial-gradient(1px 1px at 300px 90px,#a0e6ff,transparent);
  background-size:340px 240px}
::selection{background:var(--bubble);color:#1c2246}
header{position:relative;z-index:2}
a.logo{text-decoration:none;color:var(--ink)}
.logo i{box-shadow:0 0 12px rgba(160,230,255,.6),inset -3px -3px 0 rgba(160,230,255,.25)}
.topnav{display:flex;align-items:center;gap:22px}
.topnav a{color:var(--soft);text-decoration:none;font-weight:600;font-size:.95rem}
.topnav a:hover{color:var(--ink)}
button{transition:transform .15s ease,box-shadow .15s ease,background .15s}
body.site button:not(.ghost):not(.chip):not(.sw){box-shadow:0 8px 22px -8px rgba(255,240,180,.55)}
button:not([disabled]):hover{transform:translateY(-1px)}
button.ghost:hover{border-color:var(--bubble)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:800;color:var(--bubble);margin:0 0 .8rem}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:36px 0 80px}
.hero h1{text-wrap:balance}
.namebox input{background:rgba(255,255,255,.06);border-color:rgba(160,230,255,.35)}
.namebox input::placeholder{color:#9ea3cc}
.trust{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--soft);font-size:.92rem}
.trust li{display:flex;gap:6px;align-items:center}.trust li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bubble);box-shadow:0 0 8px var(--bubble)}
.trust b{color:var(--ink)}
.giftline{margin:1.1rem 0 0;font-size:.95rem;color:var(--soft)}
.giftline a{color:var(--moon);font-weight:600;text-underline-offset:3px}
.stage{position:relative;padding:30px 30px 40px}
.stage .behind{position:absolute;width:62%;border-radius:8px;box-shadow:0 20px 40px -20px rgba(0,0,0,.7);opacity:.9}
.stage .b1{top:4%;right:-2%;transform:rotate(8deg)}
.stage .b2{bottom:0;left:-4%;transform:rotate(-7deg)}
.bookmock{position:relative;transform:rotate(-2deg);border-radius:4px 12px 12px 4px;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06),12px 12px 0 -4px #d9d3bd,12px 12px 0 -2px rgba(0,0,0,.25)}
.bookmock::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6%;z-index:1;border-radius:4px 0 0 4px;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.12) 55%,transparent)}
.bookmock .cover{border-radius:4px 12px 12px 4px;box-shadow:none}
.band{padding:70px 0;border-top:1px solid rgba(160,230,255,.12)}
.center{text-align:center}
.nav.center{justify-content:center}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.step{background:rgba(255,255,255,.04);border:1px solid rgba(160,230,255,.16);border-radius:22px;padding:26px 24px}
.step p{margin:.3rem 0 0;color:var(--soft)}
.step .num{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:2.5px solid var(--bubble);color:var(--bubble);font:1.5rem "Patrick Hand",cursive;margin-bottom:14px;box-shadow:0 0 16px rgba(160,230,255,.35)}
.inside{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.insidetext p{color:var(--soft)}
.ticks{list-style:none;padding:0;margin:1rem 0 0}.ticks li{padding:.35rem 0 .35rem 1.8rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.7rem;width:14px;height:14px;border-radius:50%;border:2px solid var(--bubble)}
.spreads{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.spreads figure{margin:0}.spreads img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;box-shadow:0 18px 30px -18px rgba(0,0,0,.8)}
.spreads figure:nth-child(2){transform:translateY(22px)}
.spreads figcaption{font-family:"Patrick Hand",cursive;color:var(--soft);font-size:1.05rem;margin-top:8px;text-align:center}
.foundercard{display:flex;gap:28px;align-items:center;background:linear-gradient(135deg,rgba(55,70,138,.55),rgba(28,34,70,.4));border:1px solid rgba(160,230,255,.2);border-radius:26px;padding:34px 36px;max-width:820px;margin:0 auto}
.foundercard p{color:var(--soft);margin:.3rem 0 .6rem}.foundercard a{color:var(--moon);font-weight:600;cursor:pointer}
.fbubble{flex:none;width:96px;height:96px;border-radius:50%;border:3px solid var(--bubble);box-shadow:0 0 30px rgba(160,230,255,.4),inset -10px -10px 0 rgba(160,230,255,.12);animation:float 4s ease-in-out infinite}
.faq{max-width:720px;margin:26px auto 0}
.faq details{border-bottom:1px solid rgba(160,230,255,.18);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:14px 32px 14px 0;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:8px;font:1.6rem "Patrick Hand",cursive;color:var(--bubble)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 16px;color:var(--soft)}
.final{text-align:center;padding-bottom:90px}.final .lede{color:var(--soft);margin:0 auto}
footer.foot{padding:34px 0 50px;color:var(--soft);font-size:.9rem;border-top:1px solid rgba(160,230,255,.12);display:flex;flex-wrap:wrap;gap:10px 30px;align-items:center;justify-content:space-between}
footer.foot p{margin:0;flex:1 1 260px}
footer.foot nav{display:flex;gap:18px;flex-wrap:wrap}
footer.foot a{color:var(--soft);cursor:pointer;text-decoration:none}footer.foot a:hover{color:var(--ink)}
.logo.small{font-size:1.25rem}.logo.small i{width:16px;height:16px}
/* app screens as cards */
.site .q{background:rgba(255,255,255,.035);border:1px solid rgba(160,230,255,.16);border-radius:24px;padding:28px 30px}

.site #ask .q{margin-bottom:6px}
.site .summary{background:rgba(255,255,255,.04);border:1px solid rgba(160,230,255,.18);border-radius:24px;padding:26px}
.chip{transition:background .15s,border-color .15s}.chip:hover{border-color:var(--bubble)}
.making .orb{box-shadow:0 0 40px rgba(160,230,255,.35),inset -14px -14px 0 rgba(160,230,255,.12)}
.q .making{padding:30px 0}
input:focus,textarea:focus{outline:none;border-color:var(--bubble);box-shadow:0 0 0 4px rgba(160,230,255,.15)}
@media (max-width:900px){.inside{grid-template-columns:1fr}.how{grid-template-columns:1fr}}
@media (max-width:760px){
  .hero{grid-template-columns:minmax(0,1fr);gap:20px;padding:10px 0 50px}
  .stage{padding:10px 26px 34px;max-width:420px;margin:0 auto}
  .topnav a{display:none}
  .band{padding:50px 0}
  .foundercard{flex-direction:column;text-align:center;padding:28px 22px}
  .site .q{padding:22px 18px;border-radius:20px}
  .spreads{gap:8px}.spreads figcaption{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){.fbubble{animation:none}button{transition:none}}
.site .wrap,.site .banner{position:relative;z-index:1}
.arrive{margin:.8rem 0 0;color:var(--bubble);font-weight:700;font-size:.95rem}
.secure{margin:.9rem 0 0;color:var(--soft);font-size:.85rem}
button.share{margin-top:14px}
.giftnudge{margin-top:22px;border-top:1px solid rgba(160,230,255,.18);padding-top:18px}.giftnudge p{color:var(--soft);margin:.2rem 0 .8rem}
.sharesite{margin-top:18px}.sharesite a{color:var(--soft);cursor:pointer}
.stickybuy{display:none}
@media (max-width:760px){
  .summary .nav button,button.share{flex:1 1 100%;width:100%}
  #preview.on .stickybuy{display:block;position:fixed;left:0;right:0;bottom:0;z-index:5;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(20,25,54,.92);backdrop-filter:blur(8px);border-top:1px solid rgba(160,230,255,.18)}
  .stickybuy button{width:100%;display:flex;justify-content:center;gap:10px}
  #preview.on{padding-bottom:90px}
}