/* hobiko — design system (ported 1:1 from Claude Design handoff hobiko.dc.html) */
:root{
  /* surfaces */
  --cream:#F1E7D6;        /* app background */
  --surface:#FBF5EA;      /* cards */
  --sand:#EADFCB;
  --sage-tint:#ECEBD6;
  --cream-on:#F4ECDD;     /* text on forest */
  --line:#E6DAC3;
  --track:#E7DBC4;
  --track-2:#E4D7BE;
  /* greens + text */
  --forest:#3F4D31;       /* primary */
  --forest-dark:#2F3A26;
  --sage:#8C9A6E;
  --ink:#2A2820;
  --muted:#97907E;
  --body:#6F6857;
  --body-2:#4a4536;
  /* warm dopamine accents */
  --apricot:#E8A86C;
  --coral:#DE8160;
  --ochre:#D2A14E;
  --rose:#C77E76;
  /* tags */
  --tag-green-bg:#E5E7D2; --tag-green:#5d6a47;
  --tag-warm-bg:#F3E2D6;  --tag-warm:#9a5f49;
  /* type */
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Hanken Grotesque',-apple-system,system-ui,sans-serif;
  /* radii */
  --r-sm:14px; --r-md:22px; --r-lg:28px; --r-screen:46px; --pill:999px;
  /* shadow */
  --sh-card:0 14px 30px -20px rgba(55,48,32,.4);
  --sh-lift:0 30px 60px -28px rgba(55,48,32,.5);
  --sh-btn:0 12px 24px -10px rgba(63,77,49,.6);
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:var(--cream); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; display:flex; justify-content:center; align-items:center;
}

/* device frame — full-bleed on phones/Telegram, framed in desktop preview */
.device{
  width:390px; height:852px; max-height:100vh; background:var(--cream);
  border-radius:var(--r-screen); overflow:hidden; position:relative; display:flex; flex-direction:column;
  box-shadow:0 34px 80px -34px rgba(55,48,32,.5),0 10px 26px -14px rgba(55,48,32,.28);
}
@media (max-width:430px){ body{align-items:stretch;} .device{width:100%;height:100%;max-height:none;border-radius:0;box-shadow:none;} }

.grabber{width:38px;height:5px;border-radius:3px;background:#D8CBB2;margin:14px auto 0;flex:0 0 auto;}

/* screens (router shows one at a time) */
.screen{display:none;flex:1;min-height:0;flex-direction:column;}
.screen.active{display:flex;}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* typography helpers */
.eyebrow{font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.display{font-family:var(--serif);color:var(--ink);letter-spacing:-.01em;line-height:.98;}
.h1{font-size:46px;} .h2{font-size:42px;line-height:1.02;} .h3{font-size:38px;line-height:1;}
.title{font-family:var(--serif);color:var(--ink);line-height:1;}
.lead{font-size:15.5px;line-height:1.45;color:var(--body);}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;height:56px;border-radius:var(--pill);
  font-size:17px;font-weight:600;border:none;cursor:pointer;width:100%;font-family:var(--sans);}
.btn-primary{background:var(--forest);color:var(--cream-on);box-shadow:var(--sh-btn);}
.btn-primary:active{transform:translateY(1px);}
.btn-ghost{background:transparent;box-shadow:inset 0 0 0 1.5px var(--forest);color:var(--forest);}
.btn-link{height:auto;background:none;color:var(--muted);font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:3px;}
.cta{position:relative;padding:18px 28px 30px;flex:0 0 auto;}
.cta .fade{position:absolute;left:0;right:0;top:-40px;height:40px;background:linear-gradient(to top,var(--cream),rgba(241,231,214,0));pointer-events:none;}

/* tags */
.tag{font-size:12.5px;font-weight:500;padding:5px 11px;border-radius:13px;display:inline-block;}
.tag-green{color:var(--tag-green);background:var(--tag-green-bg);}
.tag-warm{color:var(--tag-warm);background:var(--tag-warm-bg);}

/* topbar */
.topbar{padding:14px 28px 6px;display:flex;justify-content:flex-end;align-items:center;flex:0 0 auto;}
.topbar .skip{font-size:15px;font-weight:500;color:var(--muted);background:none;border:none;cursor:pointer;}

/* ---- onboarding photo grid ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px;align-content:start;padding:22px 28px 22px;}
.photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1/1.08;cursor:pointer;}
.photo .ph-label{position:absolute;left:11px;bottom:10px;font:11px ui-monospace,monospace;color:#6f6a52;background:rgba(241,231,214,.9);padding:3px 8px;border-radius:9px;}
.photo .check{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:var(--forest);color:var(--cream-on);display:none;align-items:center;justify-content:center;font-size:15px;}
.photo .veil{position:absolute;inset:0;background:rgba(63,77,49,.16);display:none;}
.photo.selected{box-shadow:0 0 0 2.5px var(--forest);}
.photo.selected .check,.photo.selected .veil{display:flex;}

/* ---- test ---- */
.test-head{padding:22px 28px 0;flex:0 0 auto;}
.test-head .row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.test-head .q{font-size:13px;font-weight:500;color:var(--body);}
.progress{height:8px;border-radius:4px;background:var(--track-2);overflow:hidden;}
.progress > span{display:block;height:100%;border-radius:4px;background:var(--forest);transition:width .35s ease;}
.question{padding:52px 28px 0;}
.answers{flex:1;padding:38px 28px 0;display:flex;flex-direction:column;gap:14px;overflow-y:auto;}
.answer{display:flex;align-items:center;gap:16px;min-height:66px;padding:14px 22px;border-radius:22px;background:var(--surface);
  box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;}
.answer .dot{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px #C9BEA4;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--cream-on);font-size:12px;}
.answer .txt{font-size:17px;color:#3a362c;}
.answer.selected{background:var(--sage-tint);box-shadow:inset 0 0 0 2px var(--forest);}
.answer.selected .dot{background:var(--forest);box-shadow:none;}
.answer.selected .txt{font-weight:600;color:var(--ink);}

/* ---- location ---- */
.loc-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;padding:30px 32px;gap:22px;}
.loc-field{display:flex;align-items:center;gap:12px;height:60px;padding:0 20px;border-radius:22px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);}
.loc-field input{flex:1;border:none;background:none;font-family:var(--sans);font-size:16px;color:var(--ink);outline:none;}
.loc-status{font-size:13.5px;color:var(--body);text-align:center;min-height:18px;}

/* ---- feed ---- */
.feed-head{padding:18px 28px 16px;flex:0 0 auto;}
.feed-sub{margin-top:8px;font-size:14px;color:var(--body);display:flex;align-items:center;gap:7px;}
.feed-sub .pip{width:6px;height:6px;border-radius:50%;background:var(--coral);}
.feed-list{padding:0 24px 24px;display:flex;flex-direction:column;gap:16px;}
.place-card{background:var(--surface);border-radius:var(--r-lg);padding:13px;box-shadow:var(--sh-card);cursor:pointer;}
.place-card .hero{position:relative;height:152px;border-radius:18px;overflow:hidden;}
.place-card .hero .ph{position:absolute;left:12px;top:12px;font:11px ui-monospace,monospace;color:#6f6a52;background:rgba(241,231,214,.9);padding:3px 8px;border-radius:9px;}
.place-card .hero .dist{position:absolute;right:12px;top:12px;font-size:12px;font-weight:600;color:var(--forest);background:rgba(244,236,221,.92);padding:5px 11px;border-radius:13px;}
.place-card .body{padding:13px 6px 4px;}
.place-card .name{font-family:var(--serif);font-size:25px;color:var(--ink);line-height:1;}
.place-card .tags{margin-top:9px;display:flex;gap:8px;flex-wrap:wrap;}
.why{margin-top:12px;display:flex;gap:9px;align-items:flex-start;}
.why .pip{margin-top:3px;flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--ochre);}
.why .txt{font-size:13.5px;line-height:1.4;color:var(--body);}

/* ---- detail ---- */
.detail-hero{position:relative;height:236px;flex:0 0 auto;}
.detail-hero .ph{position:absolute;left:16px;bottom:16px;font:11px ui-monospace,monospace;color:#6f6a52;background:rgba(241,231,214,.9);padding:3px 9px;border-radius:9px;}
.detail-hero .back{position:absolute;top:24px;left:20px;width:40px;height:40px;border-radius:50%;background:rgba(244,236,221,.92);display:flex;align-items:center;justify-content:center;color:var(--forest);font-size:20px;cursor:pointer;}
.detail-body{flex:1;min-height:0;overflow-y:auto;padding:22px 26px 0;}
.detail-name{font-family:var(--serif);font-size:33px;line-height:1;color:var(--ink);}
.section-label{margin-top:24px;font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.vibe-rows{margin-top:14px;display:flex;flex-direction:column;gap:13px;}
.vibe-row .cap{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:5px;}
.vibe-row .cap .k{color:#3a362c;font-weight:500;} .vibe-row .cap .v{color:var(--body);}
.bar{height:8px;border-radius:4px;background:var(--track);overflow:hidden;}
.bar > span{display:block;height:100%;border-radius:4px;}
.meta{margin-top:22px;border-top:1px solid var(--line);}
.meta .row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);}
.meta .row:last-child{border-bottom:none;}
.meta .row .k{font-size:14px;color:var(--muted);} .meta .row .v{font-size:14px;font-weight:500;color:var(--ink);}
.meta .row .v.link{color:var(--forest);}

/* ---- ethics ---- */
.ethics-mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:30px 32px;}
.ethics-sprig{align-self:center;margin-bottom:36px;}
.ethics-line{font-size:18px;line-height:1.5;color:var(--body-2);text-align:center;}
.ethics-soft{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:30px;line-height:1.1;color:var(--forest);text-align:center;}
.support{margin:0 28px 38px;background:var(--surface);border-radius:26px;padding:20px 22px;box-shadow:var(--sh-card);display:flex;align-items:center;gap:15px;cursor:pointer;}
.support .ic{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#F1E0D2;display:flex;align-items:center;justify-content:center;}
.support .ic > span{width:13px;height:13px;border-radius:50%;background:var(--coral);}
.support .t1{font-size:13px;color:var(--body);line-height:1.35;}
.support .t2{font-size:16px;font-weight:600;color:var(--forest);margin-top:2px;}
.support .chev{margin-left:auto;color:var(--muted);font-size:20px;}

/* photo placeholders (match prototype's striped gradients) */
.ph-loft{background:repeating-linear-gradient(135deg,#E6D8BF 0 12px,#EEE2CB 12px 24px);}
.ph-airy{background:repeating-linear-gradient(135deg,#DCDFC4 0 11px,#E8E9D2 11px 22px);}
.ph-moody{background:repeating-linear-gradient(135deg,#ECD9C9 0 11px,#F3E6D6 11px 22px);}
.ph-boho{background:repeating-linear-gradient(135deg,#E7DBC0 0 11px,#EFE4CC 11px 22px);}
.ph-garden{background:repeating-linear-gradient(135deg,#D9DDC2 0 11px,#E6E8CF 11px 22px);}
.ph-min{background:repeating-linear-gradient(135deg,#EBDDC6 0 11px,#F2E7D2 11px 22px);}

/* ===== START — role choice ===== */
.start-mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 32px;}
.brand{display:flex;align-items:flex-end;gap:4px;justify-content:center;}
.brand-word{font-family:var(--serif);font-size:72px;line-height:.8;color:var(--forest);letter-spacing:-.02em;}
.brand-sprig{margin-bottom:6px;}
.brand-tag{margin-top:18px;text-align:center;font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.25;color:var(--body);}
.roles{margin-top:48px;display:flex;flex-direction:column;gap:15px;}
.role{display:flex;align-items:center;gap:16px;padding:24px;border:none;border-radius:28px;cursor:pointer;width:100%;font-family:var(--sans);text-align:left;}
.role-primary{background:var(--forest);box-shadow:0 18px 36px -18px rgba(63,77,49,.6);}
.role-ghost{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);}
.role-ic{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:rgba(244,236,221,.16);display:flex;align-items:center;justify-content:center;}
.role-ic>span{width:14px;height:14px;border-radius:50%;}
.role-body{flex:1;display:flex;flex-direction:column;}
.role-t{font-family:var(--serif);font-size:25px;color:var(--cream-on);line-height:1;}
.role-t.dark{color:var(--ink);}
.role-s{margin-top:6px;font-size:13.5px;color:#C9CDB6;}
.role-s.muted{color:var(--muted);}
.role-chev{color:#C9CDB6;font-size:22px;} .role-chev.muted{color:var(--muted);}

/* ===== RESULTS (cards) ===== */
.results-head{position:relative;padding:18px 28px 4px;flex:0 0 auto;}
.results-sprig{position:absolute;top:6px;right:24px;opacity:.9;}
.results-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:11px;}
.scale-card{background:var(--surface);border-radius:22px;padding:15px 16px;box-shadow:inset 0 0 0 1px #EFE3CD;min-width:0;}
.scale-name{overflow-wrap:break-word;}
.scale-card.full{grid-column:1/-1;background:var(--sage-tint);display:flex;align-items:center;justify-content:space-between;padding:16px 18px;box-shadow:none;}
.scale-name{font-family:var(--serif);font-size:21px;color:var(--ink);line-height:1;}
.scale-card.full .scale-name{font-size:23px;}
.scale-foot{margin-top:11px;display:flex;align-items:center;justify-content:space-between;}
.scale-card.full .scale-foot{margin-top:0;gap:14px;}
.dots{display:flex;gap:5px;} .dots .d{width:8px;height:8px;border-radius:50%;}
.scale-card.full .dots .d{width:9px;height:9px;}
.level{font-size:12.5px;font-weight:600;} .scale-card.full .level{font-size:13px;}
.disclaimer{background:var(--sage-tint);border-radius:18px;padding:13px 16px;margin-bottom:14px;font-size:12.5px;line-height:1.45;color:var(--body);cursor:pointer;}
.disclaimer .soft{color:var(--body-2);}
.disclaimer .support-link{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

/* ===== STUDIO ===== */
.studio-top{padding:16px 26px 8px;display:flex;align-items:center;gap:14px;flex:0 0 auto;}
.studio-top .back{position:static;width:38px;height:38px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);display:flex;align-items:center;justify-content:center;color:var(--forest);font-size:18px;cursor:pointer;}
.studio-title{font-family:var(--serif);font-size:30px;color:var(--ink);line-height:1;}
.field{margin-bottom:16px;}
.field-label{font-size:13px;font-weight:600;color:var(--body);margin-bottom:8px;}
.field-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.field-action{background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--forest);font-family:var(--sans);}
.field-action .d{width:6px;height:6px;border-radius:50%;background:var(--coral);}
.input{width:100%;height:52px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);border:none;padding:0 18px;font-size:15px;color:var(--ink);font-family:var(--sans);outline:none;}
.input::placeholder{color:var(--muted);}
.dropzone{display:block;border:1.5px dashed #C6B998;border-radius:20px;background:var(--surface);padding:22px 18px;text-align:center;cursor:pointer;}
.dz-plus{width:42px;height:42px;border-radius:50%;background:var(--sage-tint);margin:0 auto 10px;display:flex;align-items:center;justify-content:center;color:var(--forest);font-size:20px;}
.dz-t{font-size:14px;font-weight:600;color:#3a362c;} .dz-s{font:11px ui-monospace,monospace;color:var(--muted);margin-top:4px;}
.thumbs{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}
.thumb{width:72px;height:72px;border-radius:14px;background-size:cover;background-position:center;flex:0 0 auto;}
.hf-note{margin-top:16px;display:flex;gap:10px;align-items:flex-start;background:var(--sage-tint);border-radius:16px;padding:13px 15px;}
.hf-note .d{margin-top:3px;flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--sage);}
.hf-note span:last-child{font-size:12.5px;line-height:1.45;color:var(--body);}

/* ===== PROCESSING ===== */
@keyframes hobiko-breathe{0%,100%{transform:scale(1);opacity:.5;}50%{transform:scale(1.18);opacity:1;}}
.proc-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 36px;}
.proc-ring{position:relative;width:130px;height:130px;display:flex;align-items:center;justify-content:center;margin-bottom:40px;}
.proc-bg{position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(135deg,#E6D8BF 0 10px,#EEE2CB 10px 20px);opacity:.6;}
.proc-edge{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);}
.proc-dots{display:flex;gap:9px;}
.proc-dots span{width:11px;height:11px;border-radius:50%;animation:hobiko-breathe 1.4s ease-in-out infinite;}
.proc-dots span:nth-child(1){background:var(--forest);}
.proc-dots span:nth-child(2){background:var(--ochre);animation-delay:.25s;}
.proc-dots span:nth-child(3){background:var(--coral);animation-delay:.5s;}

/* ===== SUCCESS ===== */
.succ-mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 30px;}
.succ-check{align-self:center;width:64px;height:64px;border-radius:50%;background:var(--forest);display:flex;align-items:center;justify-content:center;color:var(--cream-on);font-size:30px;box-shadow:0 14px 28px -12px rgba(63,77,49,.6);}
.succ-card{margin-top:32px;background:var(--surface);border-radius:26px;padding:22px;box-shadow:0 16px 36px -24px rgba(55,48,32,.4);}
.stacked{height:12px;border-radius:6px;overflow:hidden;display:flex;margin:14px 0 18px;}
.succ-rows{display:flex;flex-direction:column;gap:12px;}
.succ-row{display:flex;align-items:center;gap:10px;}
.succ-row .d{width:9px;height:9px;border-radius:50%;}
.succ-row .k{flex:1;font-size:14.5px;color:#3a362c;} .succ-row .v{font-size:14.5px;font-weight:600;color:var(--ink);}