:root{
  --wine:#782a39;
  --wine-dark:#5d1f2d;
  --ink:#33271f;
  --muted:#76685b;
  --paper:#f3e8d6;
  --paper-light:#fbf4e8;
  --sand:#d8c2a0;
  --ochre:#b8873d;
  --dark:#33251b;
  --line:rgba(87,62,45,.20);
  --coral:#ff675f;
  --cobalt:#4167ff;
  --amber:#f6c94b;
  --teal:#25b6a6;
  --violet:#a875ef;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#e4d5bc;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif}
body{min-height:100svh;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:3px solid rgba(120,42,57,.26);outline-offset:3px}
img{max-width:100%}
#app,.screen{min-height:100svh}
.screen{position:relative}

.paper-screen{
  background:
    radial-gradient(circle at 10% 13%,rgba(184,135,61,.10),transparent 29%),
    radial-gradient(circle at 87% 8%,rgba(120,42,57,.055),transparent 25%),
    linear-gradient(180deg,#f8efdf 0%,#f2e7d4 69%,#e9d8bd 100%);
}
.paper-screen::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.17;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E");
}

/* Entry */
.home-screen{
  display:grid;
  grid-template-rows:1fr auto;
  align-items:center;
  overflow:hidden;
  padding:max(38px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));
}
.entry-shell{
  position:relative;
  z-index:1;
  width:min(100%,520px);
  margin:auto;
  text-align:center;
  transform:translateY(-1.5svh);
}
.entry-product{
  margin:0 0 11px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(36px,10vw,56px);
  line-height:.96;
  font-weight:600;
  letter-spacing:.105em;
  color:#4a3428;
}
.entry-presented{
  margin:0 0 9px;
  font-size:10px;
  line-height:1;
  font-weight:720;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#9a7452;
}
.entry-home .brand-logo{width:min(58vw,245px)}
.entry-home .entry-claim{margin:21px 0 30px}
.brand-lockup{display:grid;justify-items:center;margin:0 auto}
.brand-logo{
  display:block;
  width:min(76vw,320px);
  height:auto;
  object-fit:contain;
  margin:0 auto;
}
.entry-claim{
  margin:25px 0 31px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(21px,5.4vw,28px);
  line-height:1.3;
  font-style:italic;
  color:#5c4537;
}
.entry-button{
  border:1px solid var(--wine);
  border-radius:999px;
  background:var(--wine);
  color:#f9eee0;
  min-width:168px;
  padding:14px 26px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(92,45,48,.15);
}
.entry-button:active{transform:translateY(1px)}
.entry-button:disabled{opacity:.38;cursor:default;box-shadow:none}
.entry-foot{
  position:relative;
  z-index:1;
  margin:0;
  text-align:center;
  font-family:Georgia,"Times New Roman",serif;
  font-size:13px;
  color:rgba(74,57,45,.56);
  letter-spacing:.025em;
}

/* First-use onboarding */
.onboarding-screen{overflow-y:auto}
.onboarding-shell{width:min(100%,500px);text-align:left;transform:none;padding:10px 0}
.onboarding-progress{margin-bottom:18px;font-size:11px;font-weight:760;letter-spacing:.14em;text-transform:uppercase;color:#9a7452}
.onboarding-shell h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(27px,6.6vw,34px);line-height:1.12;font-weight:600;color:#4a3428}
.onboarding-note{margin:12px 0 24px;font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.48;color:#76685b}
.onboarding-grid{margin-bottom:24px}
.onboarding-choice{min-height:48px;border-radius:16px;text-align:center;line-height:1.2}
.onboarding-actions{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:4px}

/* Cocon */
.cocon-screen{position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(circle at 47% 42%,#233b50 0%,#152a3c 44%,#09131f 100%);color:#17212b}
.cocon-screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 20%,rgba(2,7,13,.12) 68%,rgba(1,4,8,.42) 100%)}
.cocon-scene{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.shape{position:absolute;left:0;top:0;opacity:.55;will-change:transform;mix-blend-mode:screen}
.shape-triangle{width:min(65vw,420px);height:min(66vw,450px);background:var(--coral);clip-path:polygon(50% 0,100% 88%,0 100%)}
.shape-quad{width:min(68vw,460px);height:min(53vw,350px);background:var(--cobalt);clip-path:polygon(8% 12%,98% 0,88% 96%,0 79%)}
.shape-oval{width:min(56vw,360px);height:min(39vw,260px);background:var(--amber);border-radius:50%}
.shape-pentagon{width:min(56vw,370px);height:min(62vw,400px);background:var(--teal);clip-path:polygon(50% 0,100% 34%,82% 100%,17% 92%,0 36%)}
.shape-softrect{width:min(60vw,390px);height:min(48vw,310px);background:var(--violet);border-radius:22% 34% 18% 28%/28% 18% 32% 22%}
.round-control{position:absolute;z-index:20;top:max(18px,env(safe-area-inset-top));display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:rgba(247,248,247,.90);box-shadow:0 8px 22px rgba(0,0,0,.16);cursor:pointer}
.cocon-back{left:20px;font-size:32px;line-height:1;padding:0 2px 3px 0}
.cocon-menu{right:20px;font-size:17px;letter-spacing:2px;padding:0 0 6px 2px}
.cocon-card{
  position:absolute;
  z-index:10;
  left:50%;
  bottom:max(18px,2.7svh);
  transform:translateX(-50%);
  width:min(74vw,420px);
  padding:15px 17px 14px;
  border-radius:22px;
  background:rgba(247,248,248,.52);
  border:1px solid rgba(255,255,255,.44);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  text-align:center;
}
.cocon-card h1{margin:0 0 10px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;font-size:23px;line-height:1.14;font-weight:430;letter-spacing:-.028em;color:#17212b}
.cocon-card>p{margin:9px 0 0;color:#65717a;font-size:12.5px;line-height:1.35}
.cocon-primary,.cocon-secondary,.sheet-button{border-radius:999px;min-height:40px;padding:9px 17px;cursor:pointer}
.cocon-primary{border:0;background:#17212b;color:#f8fafb;min-width:132px}
.cocon-secondary{border:1px solid rgba(23,33,43,.18);background:rgba(255,255,255,.58);color:#28343e;min-width:148px}
.text-button{border:0;background:transparent;padding:9px 11px;color:#66727b;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* One idea: reading takes priority over the decorative Cocon */
.idea-mode{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow-y:auto;
  padding:max(86px,calc(env(safe-area-inset-top) + 70px)) 0 max(20px,env(safe-area-inset-bottom));
}
.idea-mode::after{position:fixed}
.idea-mode .cocon-scene{position:fixed}
.idea-mode .round-control{position:fixed}
.idea-mode .cocon-card{
  position:relative;
  left:auto;
  bottom:auto;
  transform:none;
  flex:0 0 auto;
  margin:0 auto;
  width:min(86vw,500px);
  max-height:none;
  padding:18px 19px 17px;
  overflow:visible;
  background:rgba(247,248,248,.84);
  border-color:rgba(255,255,255,.58);
  backdrop-filter:blur(11px);
  -webkit-backdrop-filter:blur(11px);
}
.idea-meta{margin:0 0 10px;color:#8b6b4b;font-size:10px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
.idea-text{width:min(100%,440px);margin:0 auto;text-align:left}
.idea-text p{font-family:Georgia,"Times New Roman",serif;color:#263139}
.idea-text p:first-child{margin:0 0 9px;font-size:21px;line-height:1.24;font-weight:700;color:#263039}
.idea-text p:last-child{margin:0;font-size:15.5px;line-height:1.43;color:#56616a}
.idea-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:16px}
.done{max-width:410px;margin-left:auto!important;margin-right:auto!important}
.done-note{font-family:Georgia,"Times New Roman",serif!important;font-style:italic}
.quiet-result{margin-bottom:8px!important}
.accepted-note{
  width:min(100%,440px);
  margin:16px auto 0;
  padding-top:14px;
  border-top:1px solid rgba(23,33,43,.12);
  text-align:left;
}
.accepted-note strong{
  display:block;
  margin-bottom:5px;
  font-size:15px;
  line-height:1.32;
  font-weight:650;
  color:#263039;
}
.accepted-note span{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;
  line-height:1.4;
  font-style:italic;
  color:#6f777d;
}

/* Bottom settings sheet */
.sheet-backdrop{position:fixed;z-index:40;inset:0;background:rgba(3,8,13,.43);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.settings-sheet{position:fixed;z-index:41;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,620px);max-height:min(78svh,700px);overflow:auto;padding:19px 20px max(24px,env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:#f6f0e5;color:var(--ink);box-shadow:0 -20px 70px rgba(0,0,0,.28)}
.sheet-head{position:sticky;top:-19px;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:-1px -2px 0;padding:4px 2px 15px;background:linear-gradient(#f6f0e5 76%,rgba(246,240,229,0))}
.sheet-head strong{font-family:Georgia,"Times New Roman",serif;font-size:22px;color:var(--wine)}
.sheet-head button{border:0;background:transparent;width:40px;height:40px;font-size:29px;line-height:1;cursor:pointer;color:#67584d}
.setting-group{padding:18px 0;border-top:1px solid var(--line)}
.setting-group:first-of-type{border-top:0;padding-top:7px}
.setting-label{margin-bottom:10px;font-size:11px;font-weight:760;letter-spacing:.13em;text-transform:uppercase;color:#8b6b4b}
.sound-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sound-choice{display:flex;align-items:center;gap:9px;width:100%;min-height:52px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.45);padding:11px 12px;text-align:left;cursor:pointer;font-size:13px;line-height:1.2}
.sound-choice.active{border-color:rgba(120,42,57,.48);background:rgba(120,42,57,.07)}
.sound-dot{flex:0 0 auto;width:11px;height:11px;border:1px solid #886f5e;border-radius:50%;background:transparent}
.sound-choice.active .sound-dot{border-color:var(--wine);background:var(--wine);box-shadow:0 0 0 3px rgba(120,42,57,.12)}
.sound-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:12px}
#sound-test{display:none}
.sound-toggle{position:relative;display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(120,42,57,.30);border-radius:50%;background:rgba(255,255,255,.48);cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
.sound-toggle::before{content:"♫";font-family:Georgia,"Times New Roman",serif;font-size:24px;line-height:1;color:var(--wine);transform:translateY(-1px)}
.sound-toggle:has(input:checked){border-color:var(--wine);background:var(--wine)}
.sound-toggle:has(input:checked)::before{color:#fff5e9}
.sound-toggle span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sound-toggle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.audio-status{margin:10px 0 0;font-size:12px;line-height:1.4;color:#7b6e62}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nogo-grid{grid-template-columns:repeat(3,1fr)}
.choice-pill{border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.42);padding:11px 10px;cursor:pointer;color:#594d43}
.choice-pill.active{border-color:var(--wine);background:var(--wine);color:#fff5e9}
.about-details>summary{cursor:pointer;list-style:none}
.about-details>summary::-webkit-details-marker{display:none}
.profile-block{margin-top:16px}
.profile-block:first-of-type{margin-top:14px}
.profile-block-label{margin:0 0 8px;font-family:Georgia,"Times New Roman",serif;font-size:13px;color:#6c5c50}
.about-link-wrap{margin:12px 0 0}
.about-link{color:var(--wine);font-family:Georgia,"Times New Roman",serif;font-size:14px;text-decoration:none;border-bottom:1px solid rgba(120,42,57,.35);padding-bottom:2px}

@media (max-width:520px){
  .home-screen{padding-left:20px;padding-right:20px}
  .entry-shell{transform:translateY(-2svh)}
  .onboarding-shell{transform:none}
  .onboarding-grid{grid-template-columns:1fr 1fr}
  .cocon-card{width:calc(100vw - 68px);bottom:max(16px,2.2svh);padding:14px 16px 13px;border-radius:20px}
  .cocon-card h1{margin-bottom:9px;font-size:22px}
  .cocon-card>p{margin-top:8px;font-size:12px}
  .idea-mode{padding-left:20px;padding-right:20px}
  .idea-mode .cocon-card{width:100%;max-height:none;padding:16px 17px 15px}
  .idea-text p:first-child{font-size:20px;margin-bottom:8px}
  .idea-text p:last-child{font-size:15px;line-height:1.4}
  .idea-actions{gap:7px;margin-top:14px}
  .cocon-primary,.cocon-secondary{min-width:0;min-height:42px;flex:1 1 42%;padding:9px 15px}
  .accepted-note{margin-top:14px;padding-top:12px}
  .settings-sheet{padding-left:16px;padding-right:16px}
  .sound-actions{align-items:center;flex-direction:row;justify-content:flex-end}
  .nogo-grid{grid-template-columns:1fr 1fr}
}

@media (max-height:690px){
  .onboarding-screen{align-items:start;padding-top:max(24px,env(safe-area-inset-top))}
  .onboarding-note{margin-bottom:17px}
  .onboarding-choice{min-height:43px;padding-top:9px;padding-bottom:9px}
  .onboarding-grid{margin-bottom:17px}
  .cocon-card{bottom:max(10px,env(safe-area-inset-bottom));padding-top:12px;padding-bottom:11px}
  .cocon-card h1{margin-bottom:8px;font-size:21px}
  .cocon-card>p{margin-top:7px}
  .idea-mode .cocon-card{max-height:none;padding-top:14px;padding-bottom:13px}
  .idea-meta{margin-bottom:7px}
  .idea-text p:first-child{font-size:19px;margin-bottom:7px}
  .idea-text p:last-child{font-size:14.5px;line-height:1.38}
  .idea-actions{margin-top:12px}
  .cocon-primary,.cocon-secondary{min-height:40px;padding-top:8px;padding-bottom:8px}
  .accepted-note{margin-top:12px;padding-top:10px}
}

@media (prefers-reduced-motion:reduce){
  .shape{will-change:auto}
}