/* KYMA · home.css — the tool's front door, in the website's look:
   white paper, Plus Jakarta Sans, the coral bar, a sticky mist bar, a big title with the monkey, five studio stages, then your projects. */

/* one light look, same tokens as the website (the shared pop and toast read --bg/--fg/--surface too) */
:root,:root[data-theme],:root[data-theme="dark"]{
  --paper:#ffffff; --mist:#f4f3f1; --stage:#ebe9e6; --stage-2:#e2dfdb; --hline:#e3e0dc;
  --ink:#0e0e0d; --ink-2:#5a5752; --ink-3:#8d8983; --signal:#ff613d; --signal-ink:#c2401f; --coral:#ff613d;
  --sw:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --bg:#ffffff; --fg:#0e0e0d; --muted:#8d8983; --line:#e3e0dc; --surface:#ffffff; --surface-2:#f4f3f1; --cell:#f4f3f1; --accent:#ff613d; --logo:#0e0e0d;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#ffffff;--fg:#0e0e0d;--muted:#8d8983;--line:#e3e0dc;--surface:#ffffff;--surface-2:#f4f3f1;--cell:#f4f3f1;--logo:#0e0e0d;color-scheme:light}}
html,body{background:var(--paper);color:var(--ink);overflow-x:clip}
body{font-family:var(--sw);font-size:16px;line-height:1.6;letter-spacing:-.003em;-webkit-font-smoothing:antialiased;font-kerning:normal;margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--coral)}
.k-in{max-width:1264px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px),min(4vw,32px));padding-right:max(20px,env(safe-area-inset-right,0px),min(4vw,32px))}
h1,h2{margin:0;text-wrap:balance} p{margin:0}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:6px}

/* the bar */
.k-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;height:72px;background:var(--coral);color:#fff;border-bottom:1px solid rgba(255,255,255,.34)}
.k-bar-in{height:100%;display:flex;align-items:center;gap:20px}
.k-brand{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.k-brand .wordmark{height:21px;width:auto;color:#fff;overflow:visible}
.k-brand .wordmark path{transition:translate .45s cubic-bezier(.3,1.8,.5,1)}
.k-brand:hover .wordmark path{translate:0 -4px}
.k-brand .wordmark path:nth-child(3){transition-delay:.04s}.k-brand .wordmark path:nth-child(2){transition-delay:.08s}.k-brand .wordmark path:nth-child(1){transition-delay:.12s}
.k-beta{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:3px 8px 2px;line-height:1.2}
.k-nav{margin-left:auto;display:flex;gap:10px}
.k-pill{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 20px 0 16px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:500 15px/1 var(--sw);letter-spacing:.005em;cursor:pointer;white-space:nowrap;transition:background .25s,border-color .25s,color .2s,transform .2s}
.k-pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.k-pill:hover{background:var(--coral);border-color:var(--coral);color:#fff}
.k-bar .k-pill{background:#fff;border-color:#fff;color:var(--ink)}
.k-bar .k-pill:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.k-bar .k-pill.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.k-bar .k-pill.ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
.k-pill:active{transform:scale(.97)}
.k-pill.ghost{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.k-pill.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* hero */
.k-home{display:block}
.k-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(40px,5vw,64px);background:none}
.k-band{background:linear-gradient(180deg,var(--mist) 0%,var(--paper) 100%)}
.k-hero-copy{display:grid;gap:clamp(20px,2.4vw,30px);min-width:0}
.k-eyebrow{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:500;letter-spacing:.14em;line-height:1;text-transform:uppercase;color:var(--ink-2)}
.k-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal)}
.k-hero h1{font-size:clamp(42px,6.6vw,98px);line-height:1;font-weight:600;letter-spacing:-.048em;max-width:10em}
.k-hero h1 .soft{font-weight:300;letter-spacing:-.04em}
.k-cur{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:6px;min-width:0}
.k-cur-l{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.k-cur b{font-size:clamp(20px,1.8vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.2;word-break:break-word}
.k-cur #hCurMeta{flex-basis:100%;font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.k-mascot{height:clamp(200px,24vw,320px);width:auto;max-width:none;margin-bottom:-28px;filter:drop-shadow(0 24px 22px rgba(30,22,14,.18));user-select:none;-webkit-user-drag:none;cursor:pointer;transform-origin:50% 100%;transition:scale .4s cubic-bezier(.3,1.7,.5,1);animation:k-in .9s cubic-bezier(.2,.7,.1,1) both,k-bob 4.8s 1s ease-in-out infinite}
.k-mascot:hover{scale:1.05}
.k-mascot.hop{animation:k-hop .75s cubic-bezier(.3,.7,.3,1)}
@keyframes k-bob{50%{translate:0 -7px}}
@keyframes k-hop{16%{translate:0 6px;scale:1.07 .9}46%{translate:0 -48px;scale:.96 1.06}70%{translate:0 0;scale:1.05 .94}100%{translate:0 0;scale:1}}
@keyframes k-in{from{transform:translateY(24px)}}

/* section heads */
.k-sec-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;padding-bottom:20px;border-bottom:1px solid var(--ink)}
.k-sec-h h2{font-size:clamp(26px,2.4vw,34px);line-height:1.1;font-weight:600;letter-spacing:-.03em}
.k-sec-h p,.k-meta{font-size:15px;color:var(--ink-2)}
.k-sec-h .grow{flex:1}

/* studios: small stages holding the real tool */
.k-pick{padding-top:clamp(56px,6vw,88px)}
.k-studios{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:28px}
.k-card{position:relative;display:grid;gap:16px;align-content:start;text-decoration:none;color:var(--ink);border-radius:20px;outline-offset:6px}
.k-stage{position:relative;display:block;aspect-ratio:4/3.2;border-radius:18px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,var(--stage) 0%,var(--stage-2) 100%);transition:transform .45s cubic-bezier(.2,.7,.1,1)}
.k-screen{position:absolute;left:9%;top:11%;width:150%;border-radius:8px 8px 0 0;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px rgba(14,14,13,.07),0 24px 40px -20px rgba(40,30,20,.45);transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.k-screen img{display:block;width:100%;height:auto}
.k-card:hover .k-stage,.k-card:focus-visible .k-stage{transform:translateY(-4px)}
.k-card:hover .k-screen,.k-card:focus-visible .k-screen{transform:translate(-6%,-4%) scale(1.04)}
.k-cap{display:grid;gap:4px;padding:0 30px 0 2px;min-width:0}
.k-cap b{font-size:clamp(19px,1.5vw,22px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.k-cap small{font-size:14px;line-height:1.45;color:var(--ink-2)}
.k-card{grid-template-columns:minmax(0,1fr) auto}
.k-stage{grid-column:1/-1}
.k-ar{align-self:start;padding-top:2px;color:var(--ink-3);font-size:18px;line-height:1.2;transition:transform .25s,color .2s}
.k-cap{padding-right:0}
.k-card:hover .k-ar,.k-card:focus-visible .k-ar{color:var(--signal-ink);transform:translateX(4px)}

/* projects */
.k-projects{padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(64px,8vw,110px)}
.k-search{height:40px;border-radius:999px;border:1px solid var(--hline);background:var(--paper);padding:0 16px;min-width:200px;font:400 15px var(--sw);color:var(--ink)}
.k-search:focus{border-color:var(--ink);outline:none}
.h-list{display:grid}
.h-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:16px;border-bottom:1px solid var(--hline);padding:4px 0;transition:background .2s}
.h-row:hover{background:linear-gradient(90deg,var(--mist),transparent 80%)}
.h-main{display:flex;align-items:center;gap:14px;border:0;background:transparent;text-align:left;padding:16px 0 16px 6px;min-width:0;color:inherit;font:inherit;cursor:pointer}
.h-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--stage-2)}
.h-row.current .h-dot{background:var(--signal)}
.h-txt{display:grid;min-width:0;gap:3px}
.h-txt b{font-size:17px;font-weight:500;letter-spacing:-.012em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-main:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.h-txt small{font-size:13.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.h-when{font-size:13.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.h-open{display:flex;gap:2px}
.h-st{border:0;background:transparent;border-radius:999px;height:32px;padding:0 12px;font:500 13.5px/1 var(--sw);color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.h-st:hover{background:var(--ink);color:var(--paper)}
.h-st.last{color:var(--ink);box-shadow:inset 0 0 0 1px var(--hline)}
.h-more{width:36px;height:36px;justify-content:center;padding:0;border-radius:50%;border:1px solid var(--hline);background:var(--paper);color:var(--ink);font-size:16px}
.h-more:hover{border-color:var(--ink)}
.h-empty{display:grid;gap:4px;padding:28px 6px;color:var(--ink-2);font-size:16px}

/* shared pop and toast, in the same type */
.pop,.toast{font-family:var(--sw)}
.pop{border-radius:16px;border-color:var(--hline);box-shadow:0 24px 50px -18px rgba(40,30,20,.35)}
.pop.menu button{font-size:14.5px;padding:9px 12px}

/* footer */
.k-foot{border-top:1px solid var(--hline);overflow:hidden}
.k-foot-row{padding-bottom:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;padding-top:24px;font-size:14px;color:var(--ink-2)}
.k-foot-mark{margin-top:clamp(28px,4vw,48px);height:clamp(72px,13vw,190px);overflow:hidden;color:var(--stage-2)}
.k-foot-mark .wordmark{width:100%;height:auto;color:var(--stage-2)}

@media (max-width:1060px){
  .k-studios{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .k-nav .k-pill span{display:none}
  .k-nav .k-pill{padding:0;width:42px;justify-content:center}
  .k-hero{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .k-mascot{height:clamp(150px,38vw,200px);margin-right:-12px}
  .k-studios{grid-template-columns:repeat(2,minmax(0,1fr))}
  .k-cap small{font-size:13px}
  .h-row{grid-template-columns:minmax(0,1fr) auto}.h-when{display:none}.h-more{grid-column:2;grid-row:1}.h-open{grid-column:1/-1;margin:-6px 0 10px 26px;flex-wrap:wrap}
}
@media (max-width:440px){
  .k-hero{grid-template-columns:1fr}
  .k-mascot{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:24px;height:112px}
  .k-hero h1{max-width:7.2em}
}
@media (prefers-reduced-motion:reduce){.k-card *,.k-mascot{transition:none!important;animation:none!important}}