[hidden] { display:none !important; }
:root {
  --cream: #f4efe5;
  --cream-2: #fbf8f2;
  --clay: #b97a5d;
  --ochre: #c99c4d;
  --sage: #8f9f87;
  --mist: #8ca6b6;
  --slate: #314256;
  --slate-2: #526071;
  --ink: #26313c;
  --muted: #6d756f;
  --line: rgba(49, 66, 86, .14);
  --shadow: 0 20px 50px rgba(48, 58, 63, .12);
  --radius: 28px;
  --radius-sm: 18px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--cream); }
body { margin: 0; min-height: 100vh; background: linear-gradient(140deg, #f7f2e8 0%, #eef1eb 52%, #e8edf1 100%); }
button, input, textarea, select { font: inherit; }
button, label.file-label { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(140,166,182,.45); outline-offset: 3px; }
button:disabled { opacity: .48; cursor: not-allowed; }
img { display: block; max-width: 100%; }
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: clamp(1.4rem, 2vw, 2rem); margin-bottom: 0; }
h2 { font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1.05; }
h3 { font-size: 1.2rem; }
p { line-height: 1.6; color: var(--slate-2); }
small { color: var(--muted); }
.app-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 270px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 26px 20px; background: rgba(244,239,229,.88); border-right: 1px solid var(--line); backdrop-filter: blur(24px); display: flex; flex-direction: column; gap: 26px; z-index: 20; }
.brand-block { display: flex; align-items: center; gap: 13px; }
.brand-block strong { display:block; font-size: 1.25rem; }
.brand-block small { display:block; }
.brand-mark { width: 42px; height: 42px; border-radius: 50%; display:grid; place-items:center; background: radial-gradient(circle at 50% 62%, #ffe59a 0 12%, #c98454 13% 33%, #596b66 60%, #314256 100%); box-shadow: 0 0 24px rgba(201,156,77,.35); }
.brand-mark span { width: 10px; height: 16px; border-radius: 50% 50% 45% 45%; background: #fff3be; box-shadow: 0 0 16px #ffd76b; }
.primary-nav { display: grid; gap: 8px; }
.nav-button { border: 0; border-radius: 16px; padding: 13px 14px; text-align: left; display:flex; gap:12px; align-items:center; background: transparent; color: var(--slate); font-weight: 650; }
.nav-button span { width: 22px; text-align:center; font-size: 1.15rem; }
.nav-button:hover, .nav-button.is-active { background: rgba(49,66,86,.09); }
.mode-card, .privacy-note { border-radius: 20px; padding: 16px; background: rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7); }
.mode-card { margin-top: auto; }
.mode-card strong { display:block; margin:4px 0; }
.privacy-note p { font-size: .82rem; margin-bottom:0; }
.eyebrow { display:inline-block; text-transform: uppercase; letter-spacing:.13em; font-size:.72rem; color: var(--clay); font-weight: 800; margin-bottom:8px; }
.eyebrow.light { color: rgba(255,255,255,.82); }
.text-button { border:0; padding:0; background:none; color:var(--slate); text-decoration:underline; }
.main-content { min-width: 0; padding: 26px clamp(20px, 4vw, 58px) 64px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.topbar-actions, .button-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.button-row.end { justify-content:flex-end; }
.button-row.between { justify-content:space-between; }
.primary-button,.secondary-button,.glass-button,.danger-button,.icon-button,label.file-label { border:0; border-radius:999px; padding:12px 18px; font-weight:750; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.primary-button { background: var(--slate); color:white; box-shadow: 0 10px 24px rgba(49,66,86,.16); }
.primary-button:hover { background:#25374a; }
.primary-button.large { padding:16px 26px; font-size:1.05rem; }
.secondary-button, label.file-label { background: rgba(255,255,255,.75); color:var(--slate); border:1px solid var(--line); }
.glass-button { color:white; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.42); backdrop-filter:blur(12px); }
.danger-button { background:#8e3d35; color:white; }
.danger-soft { background:#7e4f46; }
.icon-button { padding:10px 12px; background:white; }
.route { display:none; animation:fade .25s ease; }
.route.is-active { display:block; }
@keyframes fade { from { opacity:0; transform:translateY(4px)} to {opacity:1; transform:none} }
.hero-card,.wide-hero { position:relative; overflow:hidden; border-radius:34px; min-height:390px; box-shadow:var(--shadow); }
.hero-card img,.wide-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(31,40,48,.72), rgba(31,40,48,.20) 70%, transparent); }
.hero-content { position:relative; z-index:2; max-width:620px; padding:clamp(30px,6vw,70px); color:white; }
.hero-content p { color:rgba(255,255,255,.86); max-width:560px; }
.hero-content h2 { max-width:540px; }
.wide-hero.compact { min-height:270px; }
.wide-hero.compact .hero-content { padding:44px; }
.pill { display:inline-flex; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.28); font-size:.76rem; font-weight:800; }
.pill.dark { background:rgba(49,66,86,.09); border-color:var(--line); color:var(--slate); }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin:42px 0 20px; gap:20px; }
.section-heading h2 { margin-bottom:0; font-size:clamp(1.4rem,2.4vw,2.1rem); }
.section-heading.actions { align-items:center; }
.card-grid { display:grid; gap:18px; }
.card-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card-grid.two,.split-grid { grid-template-columns:repeat(2,minmax(0,1fr)); display:grid; gap:18px; }
.journey-card { background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.72); border-radius:24px; overflow:hidden; box-shadow:0 15px 36px rgba(56,66,70,.08); display:flex; flex-direction:column; min-width:0; }
.journey-art { height:160px; position:relative; overflow:hidden; background:linear-gradient(145deg,#c99c4d,#8fa091); }
.journey-art img { width:100%; height:100%; object-fit:cover; }
.journey-body { padding:18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.journey-body p { font-size:.91rem; margin-bottom:0; }
.journey-meta { display:flex; flex-wrap:wrap; gap:7px; }
.meta-chip { padding:6px 9px; border-radius:999px; background:rgba(49,66,86,.07); color:var(--slate); font-size:.72rem; font-weight:750; }
.journey-actions { display:flex; gap:8px; margin-top:auto; flex-wrap:wrap; }
.journey-actions button { flex:1; min-width:110px; }
.soft-card,.form-card,.privacy-banner { padding:clamp(22px,3vw,34px); border-radius:var(--radius); background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.72); box-shadow:0 12px 32px rgba(51,64,69,.07); }
.soft-card.sage { background:linear-gradient(145deg,rgba(143,159,135,.25),rgba(255,255,255,.78)); }
.soft-card.blue { background:linear-gradient(145deg,rgba(140,166,182,.28),rgba(255,255,255,.78)); }
.soft-card.ochre { background:linear-gradient(145deg,rgba(201,156,77,.24),rgba(255,255,255,.78)); }
.split-grid { margin-top:20px; }
.create-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr); gap:22px; align-items:start; }
.form-card { display:grid; gap:18px; }
.form-card.slim { gap:14px; }
.form-card label { display:grid; gap:7px; font-weight:700; color:var(--slate); }
input,textarea,select { width:100%; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.85); padding:13px 14px; color:var(--ink); }
/* Checkboxes and radios are not text fields: keep them their natural size */
input[type="checkbox"],input[type="radio"] { width:20px; height:20px; padding:0; margin:0; flex:0 0 auto; accent-color:var(--slate); }
textarea { min-height:110px; resize:vertical; }
fieldset { border:1px solid var(--line); border-radius:20px; padding:18px; }
legend { padding:0 8px; color:var(--slate); font-weight:800; }
.form-grid { display:grid; gap:14px; }
.form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.range-label output { margin-left:auto; font-weight:800; color:var(--clay); }
.range-label { grid-template-columns:1fr auto; }
.range-label input { grid-column:1/-1; padding:0; }
.field-help { font-size:.84rem; margin:-4px 0 6px; }
.visual-aside { position:sticky; top:24px; overflow:hidden; border-radius:var(--radius); background:var(--slate); color:white; box-shadow:var(--shadow); }
.visual-aside img { width:100%; height:360px; object-fit:cover; }
.visual-copy { padding:24px; }
.visual-copy p { color:rgba(255,255,255,.75); }
.inline-confirmation { color:#456c52; background:#e6f1e4; padding:10px 12px; border-radius:12px; font-weight:750; }
.sound-summary { padding:13px; border-radius:14px; background:rgba(49,66,86,.06); }
.sound-summary.empty { color:var(--muted); }
.journal-grid { display:grid; gap:14px; }
.journal-entry { width:100%; text-align:left; border:1px solid rgba(255,255,255,.8); border-radius:20px; background:rgba(255,255,255,.68); padding:18px; display:grid; grid-template-columns:1fr auto; gap:12px; }
.journal-entry p { margin:6px 0 0; }
.privacy-banner { margin-top:28px; background:rgba(143,159,135,.16); }
.profile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.status-card { padding:16px; border-radius:16px; background:rgba(49,66,86,.06); }
.metric-list { display:grid; gap:10px; }
.metric-row { display:flex; justify-content:space-between; padding-bottom:8px; border-bottom:1px solid var(--line); }
.check-list { display:grid; gap:16px; }
.check-list label { display:flex; gap:12px; align-items:center; text-align:left; font-weight:600; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.7); cursor:pointer; }
.check-list label:has(input:checked) { background:rgba(143,159,135,.18); border-color:rgba(143,159,135,.5); }
/* Practitioner page: breathing room between the stacked bands */
#route-practitioner > .card-grid, #route-practitioner > .form-card { margin-top: 24px; }
.practitioner-copy { display:none; }
body[data-mode="practitioner"] .practitioner-copy { display:block; }
body[data-mode="practitioner"] .user-copy { display:none; }
body[data-mode="user"] .practitioner-only { display:none; }
.toast-region { position:fixed; top:20px; right:22px; z-index:100; display:grid; gap:8px; }
.toast { background:var(--slate); color:white; border-radius:16px; padding:12px 16px; box-shadow:var(--shadow); animation:toastIn .2s ease; }
@keyframes toastIn { from{opacity:0;transform:translateY(-5px)} }
dialog { border:0; padding:0; background:transparent; max-width:none; max-height:none; }
dialog::backdrop { background:rgba(25,33,40,.72); backdrop-filter:blur(12px); }
.modal-dialog { width:min(720px,calc(100vw - 24px)); }
.modal-card { position:relative; border-radius:28px; padding:32px; background:var(--cream-2); box-shadow:var(--shadow); max-height:min(88vh,900px); overflow:auto; }
.close-button { position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.78); font-size:1.5rem; z-index:4; }
.experience-dialog { width:100vw; height:100vh; height:100dvh; }
.experience-shell { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:28px; padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px)); background:radial-gradient(circle at center, #f7e5bc 0%, #d0a576 22%, #73827f 56%, #314256 100%); color:white; position:relative; overflow:auto; }
.experience-stage { width:min(700px,94vw); text-align:center; padding:38px; border-radius:34px; background:rgba(26,37,48,.48); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(20px); box-shadow:0 30px 90px rgba(0,0,0,.24); }
.experience-stage p,.experience-stage small { color:rgba(255,255,255,.82); }
.experience-stage .pill.dark { background:rgba(255,255,255,.15); color:white; border-color:rgba(255,255,255,.2); margin-bottom:18px; }
.countdown-number { font-size:clamp(6rem,22vw,12rem); line-height:1; font-weight:250; text-shadow:0 0 40px rgba(255,216,125,.4); }
.progress-wrap { width:min(600px,100%); margin:20px auto; }
.time-row { display:flex; justify-content:space-between; font-variant-numeric:tabular-nums; }
progress { width:100%; height:10px; border:0; border-radius:999px; overflow:hidden; }
progress::-webkit-progress-bar { background:rgba(49,66,86,.12); }
progress::-webkit-progress-value { background:linear-gradient(90deg,var(--clay),var(--ochre)); }
.experience-stage progress::-webkit-progress-bar { background:rgba(255,255,255,.2); }
.experience-stage progress::-webkit-progress-value { background:#ffe3a0; }
.transport-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.secondary-button.is-on { background:var(--ochre); border-color:var(--ochre); color:#2b2416; }
.visual-lightwork { width:min(380px,70vw); aspect-ratio:1; margin:10px auto 18px; position:relative; display:grid; place-items:center; border-radius:50%; filter:brightness(var(--light-brightness,1)); will-change:filter,transform; }
.visual-lightwork.is-running { box-shadow:0 0 90px rgba(255,211,126,.22); }
.light-core { width:32%; height:32%; border-radius:50%; background:radial-gradient(circle,#fff9d7,#f7c56a 42%,#bb7254 75%,transparent 76%); box-shadow:0 0 80px rgba(255,208,113,.9); transform:scale(var(--light-scale,1)); }
.light-ring { position:absolute; border-radius:50%; border:2px solid rgba(255,232,175,.28); animation:ringFloat 5s ease-in-out infinite; }
.ring-one { width:60%; height:60%; }
.ring-two { width:86%; height:86%; animation-delay:-2s; }
@keyframes ringFloat { 50% { transform:scale(1.06); opacity:.55; } }
.progress-head { position:sticky; top:-32px; background:linear-gradient(var(--cream-2) 75%,transparent); padding:12px 0 18px; z-index:2; display:grid; gap:7px; }
.safety-question { display:grid; gap:18px; padding:18px 0; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.choice-grid label { padding:16px; border:1px solid var(--line); border-radius:16px; background:white; display:flex; gap:9px; align-items:center; }
.emotion-row { display:flex; gap:8px; flex-wrap:wrap; }
.emotion-row input { position:absolute; opacity:0; pointer-events:none; }
.emotion-row span { display:inline-flex; padding:9px 13px; border-radius:999px; background:rgba(49,66,86,.07); border:1px solid transparent; }
.emotion-row input:checked + span { background:var(--slate); color:white; }
.number-list { display:grid; gap:10px; color:var(--slate-2); }
.warning-copy { border-left:4px solid var(--ochre); padding-left:14px; }
.mobile-only { display:none; }
.bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:30; grid-template-columns:repeat(5,1fr); gap:0; padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background:rgba(244,239,229,.92); border-top:1px solid var(--line); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
.bottom-nav .nav-button { flex-direction:column; gap:2px; padding:8px 4px; border-radius:14px; text-align:center; font-weight:650; min-height:52px; justify-content:center; }
.bottom-nav .nav-button span { width:auto; font-size:1.25rem; line-height:1; }
.bottom-nav .nav-button small { font-size:.66rem; letter-spacing:.02em; color:inherit; }
.bottom-nav .nav-button.is-active { background:rgba(49,66,86,.1); color:var(--slate); }
@media (max-width: 1050px) {
  .card-grid.three { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-grid { grid-template-columns:1fr 1fr; }
  .create-layout { grid-template-columns:1fr; }
  .visual-aside { position:relative; top:0; display:grid; grid-template-columns:1fr 1fr; }
  .visual-aside img { height:100%; min-height:280px; }
}
@media (max-width: 780px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:0; transform:translateX(-105%); width:min(310px,90vw); transition:transform .2s ease; box-shadow:var(--shadow); }
  body.menu-open .sidebar { transform:none; }
  .mobile-only { display:inline-flex; }
  .bottom-nav { display:grid; }
  .main-content { padding:18px 16px calc(86px + env(safe-area-inset-bottom, 0px)); }
  .topbar { align-items:flex-start; }
  .topbar-actions .secondary-button { display:none; }
  .topbar-actions #installButton:not([hidden]) { display:inline-flex; }
  .hero-card { min-height:500px; }
  .hero-overlay { background:linear-gradient(0deg,rgba(31,40,48,.78),rgba(31,40,48,.14)); }
  .hero-content { align-self:end; padding:26px; position:absolute; bottom:0; }
  .card-grid.three,.card-grid.two,.split-grid,.profile-grid,.form-grid.two { grid-template-columns:1fr; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .section-heading.actions { align-items:stretch; }
  .visual-aside { grid-template-columns:1fr; }
  .visual-aside img { height:260px; }
  .experience-stage { padding:24px 16px; width:min(700px,100%); }
  .visual-lightwork { width:min(300px,62vw); margin:6px auto 12px; }
  .transport-row button { min-height:48px; }
}
/* Short viewports (phones in landscape, small phones): keep Stop controls on screen */
@media (max-height: 740px) {
  .experience-shell { place-items:start center; padding-top:16px; }
  .experience-stage { padding:20px 16px; }
  .countdown-number { font-size:clamp(4rem,16vw,7rem); }
  .visual-lightwork { width:min(220px,46vh); margin:4px auto 10px; }
  .progress-wrap { margin:12px auto; }
}