/* ===== Tokens ===== */
:root{
  --bg:#0b0c10; --ink:#e9f1ff; --muted:#b6c1d6;
  --accent:#8dff85; --accent2:#ff6ec7;
  --card:rgba(255,255,255,.06); --glass:rgba(255,255,255,.10);
  --ring:0 0 0 1.5px color-mix(in oklab, var(--accent), white 20%);
  --shadow:0 10px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%} html{color-scheme:dark}
body{
  margin:0; color:var(--ink);
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, #1a1d27 0%, transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, #12131a 0%, transparent 60%),
    var(--bg);
  overflow:hidden;
}
.app{position:relative; width:100%; height:100dvh}

/* Screens */
.screen{position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; pointer-events:none; transform:scale(.985);
  transition:opacity .32s ease, transform .32s ease}
.screen.is-active{opacity:1; pointer-events:auto; transform:none}

/* Card */
.glass{background:var(--card); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px) saturate(120%); -webkit-backdrop-filter:blur(12px) saturate(120%);
  box-shadow:var(--shadow); border-radius:20px}
.card{width:min(980px,92vw); padding:clamp(18px,3vw,28px)}
.card__hd h1{margin:0 0 .35rem; font-weight:700; letter-spacing:.2px; font-size:clamp(20px,2.6vw,30px)}
.muted{color:var(--muted)}
.card__ft{margin-top:.75rem}

/* AXES — symmetric */
.axes{
  position:relative; height:min(60vh,560px); min-height:380px;
  margin:1rem auto; border-radius:18px; overflow:hidden;
  display:grid; place-items:center;
  background:
    radial-gradient(120px 120px at 15% 85%, color-mix(in oklab, var(--accent), transparent 70%), transparent 90%),
    radial-gradient(140px 140px at 85% 15%, color-mix(in oklab, var(--accent2), transparent 70%), transparent 90%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border:1px dashed rgba(255,255,255,.18);
}
.axis{position:absolute; inset:auto; background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}
.axis--h{width:84%; height:2px; left:8%; right:8%}
.axis--v{height:84%; width:2px; top:8%; bottom:8%; background:linear-gradient(0deg,transparent,rgba(255,255,255,.8),transparent)}

/* CENTER TEXTAREA — smaller & more transparent */
.center-text{
  position:absolute; inset:auto; width:min(30ch, 44%); height:clamp(60px, 12vh, 100px);
  resize:none; padding:.6rem .8rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.045); color:var(--ink);
  font:600 .95rem/1.3 ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  box-shadow:0 6px 22px rgba(0,0,0,.28);
}
.center-text:focus{outline:none; box-shadow:var(--ring), 0 8px 28px rgba(0,0,0,.35)}

/* ICONS — exaggerated growth on tap */
.icon-btn{
  --scale:1; position:absolute; display:grid; place-items:center;
  inline-size: clamp(64px, 10.5vmin, 92px); aspect-ratio:1;
  border-radius:50%; border:1px solid rgba(255,255,255,.14); background:var(--glass);
  cursor:pointer; transition:transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .25s ease, filter .2s ease;
  transform:translateZ(0) scale(var(--scale)); box-shadow:0 8px 26px rgba(0,0,0,.38); will-change:transform;
}
.icon-btn:hover{box-shadow:0 12px 34px rgba(0,0,0,.48); transform:translateZ(0) scale(calc(var(--scale) * 1.06))}
.icon-btn:focus-visible{outline:none; box-shadow:var(--ring), 0 12px 34px rgba(0,0,0,.48)}
.icon{font-size:clamp(30px, 6vmin, 44px); transform:translateY(-2px)}
.ticks{position:absolute; bottom:6px; left:0; right:0; font-size:12px; letter-spacing:2px; text-align:center; color:var(--accent)}
.icon-btn.is-active{border-color:color-mix(in oklab, white 20%, var(--accent))}
.icon-btn.is-max{filter:drop-shadow(0 0 10px color-mix(in oklab, var(--accent), white 25%))}

/* Symmetric placements (only N, S, E, W) */
.on-axis[style*="--pos: n"]  { top: 8%;  left:50%; translate:-50% 0 }
.on-axis[style*="--pos: s"]  { bottom: 8%; left:50%; translate:-50% 0 }
.on-axis[style*="--pos: e"]  { right: 8%; top:50%; translate:0 -50% }
.on-axis[style*="--pos: w"]  { left: 8%;  top:50%; translate:0 -50% }

/* MAIN SCREEN */
.screen--main{isolation:isolate}
.poster{
  position:absolute; inset:0;
  background-image:url("/mnt/data/26.6.2_compressed-1-764_page-0124.jpg");
  background-size:cover; background-position:center;
  filter:contrast(1.02) saturate(1.02) brightness(1.02);
  transform:scale(1.02);
}

.palette{position:absolute; top:18px; left:18px; padding:10px 12px; display:grid; gap:10px}
.palette__row{display:flex; gap:10px; flex-wrap:wrap; max-width:min(50vw,720px)}
.palette__btn{inline-size:56px}
.back-btn{
  appearance:none; border:1px solid rgba(255,255,255,.16); background:var(--glass); color:var(--ink);
  padding:.5rem .7rem; border-radius:12px; cursor:pointer; transition:transform .2s ease, background .2s ease, box-shadow .2s ease}
.back-btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.14); box-shadow:0 8px 24px rgba(0,0,0,.35)}
.back-btn:focus-visible{outline:none; box-shadow:var(--ring)}

/* View transitions */
::view-transition-group(root){animation-duration:.5s}
::view-transition-old(root){animation:fade-out .5s ease both}
::view-transition-new(root){animation:reveal .5s ease both}
@keyframes fade-out{to{opacity:0; scale:.98}}
@keyframes reveal{from{opacity:0; filter:blur(6px); scale:1.02} to{opacity:1; filter:blur(0); scale:1}}
.reduced-motion *{transition:none !important; animation:none !important}

/* a11y helper */
.visually-hidden{position:absolute!important; height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

