/* look: arcade · Lilita One / Karla (made by Towers' maker from its kit, tw_looks.go) */
:root {
  --accent: #c4513a; /* the brand's #c8553d, a shade deeper so white on it reads (4.5:1) */
  --on-accent: #ffffff;
  --display: 'Lilita One', 'Noto Sans JP', system-ui, sans-serif;
  --text: 'Karla', 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --bg: #ffffff; --bg-2: #f5f5f3; --surface: #ffffff; --screen: #ffffff; --screen-ink: var(--ink); --field: #ffffff;
  --ink: #161616; --ink-2: #5d6166; --line-c: #e2e2de;
  --link: color-mix(in srgb, var(--accent) 78%, var(--ink)); --tint: color-mix(in srgb, var(--accent) 12%, var(--bg));
  --good: #16794a; --bad: #b42318;
  --t-weight: 400; --t-size: 1rem;
  --h-weight: 700; --h-lh: 1.08; --h-track: -0.02em; --h-case: none;
  --h1: clamp(2.3rem, 6vw, 4.6rem); --h2: clamp(1.6rem, 3.4vw, 2.6rem); --h3: 1.2rem;
  --b-font: var(--text); --b-weight: 700; --b-track: 0; --b-case: none;
  --r: 12px; --r-btn: 10px; --r-field: 8px; --r-badge: 999px; --bw: 1px; --btn-line: transparent; --btn-h: 48px;
  --shadow: none; --shadow-hover: none; --shadow-press: none; --card-shadow: none;
  --hover-move: none; --press-move: translateY(1px);
  --pad: clamp(1rem, 2.5vw, 1.6rem); --gap: clamp(1rem, 2.5vw, 2rem);
  --gutter: clamp(16px, 4vw, 48px); --max: 1180px; --rhythm: clamp(3.5rem, 8vw, 7rem);
  /* motion (motion.js reads these): how things come in, how long, how far, the gap between a row's items, smooth
     scrolling (1) or the browser's own (0) */
  --m-feel: soft; --m-dur: .7; --m-dist: 24; --m-stagger: .08; --m-smooth: 0; --m-lift: translateY(-3px);
  --i-stroke: 2; /* the icons' line */
}

/* Arcade (the Hookwise / Bora Trilha family): cream paper, navy ink outlines, loud flat colour, pressable buttons with
   a hard shadow, rounds and badges like a game. No gradients, no glows. */
:root {
  --bg: #fff7ea; --bg-2: #f6ead4; --surface: #ffffff; --screen: #ffffff; --field: #ffffff;
  --ink: #10223d; --ink-2: #33465f; --line-c: #10223d; --tint: #fff0bf;
  --h-weight: 800; --h-lh: 1; --h-track: -0.025em; --h1: clamp(2.5rem, 7vw, 5.2rem);
  --b-font: var(--display); --b-weight: 800;
  --r: 22px; --r-btn: 999px; --r-field: 14px; --r-badge: 999px; --bw: 3px; --btn-line: #10223d; --btn-h: 54px;
  --shadow: 0 5px 0 #10223d; --shadow-hover: 0 7px 0 #10223d; --shadow-press: 0 1px 0 #10223d;
  --card-shadow: 0 6px 0 #10223d; --hover-move: translateY(-2px); --press-move: translateY(4px);
  --m-feel: pop; --m-dur: .5; --m-dist: 30; --m-stagger: .07; --m-lift: translate(-2px, -2px); --i-stroke: 2.5;
}

/* The parts every page of this business is built from, in its look's tokens (above). Build on them: change a token
   to tune the look, add the page's own rules in the site's stylesheet, don't restyle these from scratch. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--t-weight) var(--t-size)/1.55 var(--text);
  -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: var(--h-weight); line-height: var(--h-lh);
  letter-spacing: var(--h-track); text-transform: var(--h-case); margin: 0 0 .4em; text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p { margin: 0 0 1em; max-width: 68ch; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mono, code, kbd, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
section { padding-block: var(--rhythm); }
.muted { color: var(--ink-2); }
.kicker { font: 600 .8rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* buttons: .btn is the main one, .btn.ghost the second */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: var(--btn-h);
  padding: 0 1.4em; border: var(--bw) solid var(--btn-line); border-radius: var(--r-btn); background: var(--accent);
  color: var(--on-accent); font: var(--b-weight) 1rem/1 var(--b-font); letter-spacing: var(--b-track);
  text-transform: var(--b-case); text-decoration: none; cursor: pointer; box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, background .15s; white-space: nowrap; touch-action: manipulation; }
.btn:hover { transform: var(--hover-move); box-shadow: var(--shadow-hover); }
.btn:active { transform: var(--press-move); box-shadow: var(--shadow-press); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-c); box-shadow: none; }
.btn.big { min-height: calc(var(--btn-h) + 10px); padding: 0 1.8em; font-size: 1.12rem; }

/* surfaces: .card for a block, .panel for the product's own screen */
.card { background: var(--surface); border: var(--bw) solid var(--line-c); border-radius: var(--r); padding: var(--pad);
  box-shadow: var(--card-shadow); }
.panel { background: var(--screen); color: var(--screen-ink); border: var(--bw) solid var(--line-c);
  border-radius: var(--r); box-shadow: var(--card-shadow); overflow: hidden; }
.panel > .bar { display: flex; align-items: center; gap: .6em; padding: .7em 1em; border-bottom: 1px solid var(--line-c);
  font: 600 .85rem/1 var(--mono); color: var(--ink-2); }
.panel > .body { padding: var(--pad); }
.fade { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }

/* marks */
.badge { display: inline-flex; align-items: center; gap: .35em; padding: .25em .7em; border-radius: var(--r-badge);
  background: var(--tint); color: var(--ink); border: 1px solid var(--line-c); font: 600 .78rem/1.2 var(--b-font); }
.badge.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
hr, .rule { border: 0; border-top: 1px solid var(--line-c); margin: 0; }

/* tables (the product's results) */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: start; padding: .65em .8em; border-bottom: 1px solid var(--line-c); vertical-align: top; }
th { font: 600 .78rem/1.2 var(--b-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }

/* forms */
label { display: block; font-weight: 600; margin: 0 0 .35em; }
input, select, textarea { width: 100%; min-height: var(--btn-h); padding: .55em .9em; background: var(--field);
  border: var(--bw) solid var(--line-c); border-radius: var(--r-field); color: var(--ink); }
textarea { min-height: 7em; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.field { margin: 0 0 1rem; }
.error { color: var(--bad); font-weight: 600; }
.ok { color: var(--good); font-weight: 600; }

/* the top bar and the footer */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; }
.top .brand { display: flex; align-items: center; gap: .55em; font: var(--h-weight) 1.15rem/1 var(--display);
  color: var(--ink); text-decoration: none; text-transform: var(--h-case); letter-spacing: var(--h-track); }
.top .brand img { width: 34px; height: 34px; border-radius: calc(var(--r) / 2); }
footer { padding-block: 2.5rem; border-top: 1px solid var(--line-c); color: var(--ink-2); font-size: .9rem; }

/* the signed-in pages: a narrow column for a form, a wide one for results */
.page { padding-block: 2rem 4rem; }
.narrow { width: min(100% - 2 * var(--gutter), 440px); margin-inline: auto; }
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* motion (motion.js, server/design/motion/kit.js): what's about to come in is hidden only while html.m-on (the head's
   one line) and the kit runs; without them everything is simply there */
.m-on [data-reveal]:not(.m-in), .m-on [data-stagger]:not(.m-in) > *, .m-on [data-typed]:not(.m-in) { opacity: 0; }
.top { transition: box-shadow .25s ease, background .25s ease, padding .25s ease; }
.top.is-scrolled { box-shadow: 0 1px 0 var(--line-c), 0 10px 30px -18px rgb(0 0 0 / .35); }
.card, .panel { transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease; }
a.card:hover, .card.lift:hover, .slide .card:hover { transform: var(--m-lift); }
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-progress] { position: fixed; inset: 0 0 auto; height: 3px; background: var(--accent); transform-origin: 0 50%;
  transform: scaleX(0); z-index: 50; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* a sliding row: scrolls sideways and snaps by itself, Embla takes it over when motion.js runs */
.carousel { position: relative; }
.carousel-view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel-view::-webkit-scrollbar { display: none; }
.carousel.is-live .carousel-view { overflow: hidden; scroll-snap-type: none; }
.carousel-track { display: flex; gap: var(--gap); touch-action: pan-y pinch-zoom; }
.slide { flex: 0 0 var(--slide, min(86%, 360px)); min-width: 0; scroll-snap-align: start; }
.carousel-nav { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; }
.carousel-nav [data-prev], .carousel-nav [data-next] { width: 44px; height: 44px; display: grid; place-items: center;
  border: var(--bw) solid var(--line-c); border-radius: var(--r-btn); background: var(--surface); color: var(--ink);
  cursor: pointer; transition: transform .15s ease, opacity .15s; }
.carousel-nav [disabled] { opacity: .35; cursor: default; }
.carousel-dots { display: flex; gap: .45rem; margin-inline-start: auto; }
.carousel-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--line-c);
  cursor: pointer; transition: width .3s cubic-bezier(.22, 1, .36, 1), background .3s; }
.carousel-dots button[aria-current="true"] { width: 24px; background: var(--accent); }

/* a row that runs by itself (data-marquee): its first child is the track */
[data-marquee] { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
[data-marquee] > * { display: flex; gap: var(--gap); width: max-content; }
[data-marquee].is-live > * { animation: m-run var(--mq, 30s) linear infinite; }
[data-marquee].is-live:hover > * { animation-play-state: paused; }
@keyframes m-run { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }

/* icons (Lucide, /assets/icons.svg) and their motion; emoji */
.i { width: 1.25em; height: 1.25em; display: inline-block; flex: none; vertical-align: -.22em; fill: none;
  stroke: currentColor; stroke-width: var(--i-stroke); stroke-linecap: round; stroke-linejoin: round; }
.i.big { width: 2rem; height: 2rem; }
.i-box { display: inline-grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: var(--r);
  background: var(--tint); color: var(--accent); }
.i-box .i { width: 1.5rem; height: 1.5rem; }
.i-draw { stroke-dasharray: 80; stroke-dashoffset: 0; }
.m-on .i-draw:not(.m-drawn) { stroke-dashoffset: 80; }
.i-nudge, .i-wiggle { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
a:hover .i-nudge, button:hover .i-nudge, .btn:hover .i-nudge { transform: translateX(4px); }
a:hover .i-wiggle, button:hover .i-wiggle, .card:hover .i-wiggle { animation: i-wiggle .5s ease; }
.i-pulse { animation: i-pulse 2.2s ease-in-out infinite; }
.i-spin { animation: i-spin 1s linear infinite; }
.dot-live { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); animation: dot-live 2s ease-out infinite; }
.emoji { display: inline-block; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-style: normal; line-height: 1; }
.emoji.wave { animation: e-wave 2.6s ease-in-out infinite; transform-origin: 70% 75%; }
.emoji.float { animation: e-float 3.2s ease-in-out infinite; }
@keyframes i-wiggle { 25% { transform: rotate(-10deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }
@keyframes i-pulse { 50% { transform: scale(1.12); opacity: .75; } }
@keyframes i-spin { to { transform: rotate(1turn); } }
@keyframes dot-live { 70% { box-shadow: 0 0 0 .5em transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes e-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
@keyframes e-float { 50% { transform: translateY(-6px); } }

/* smooth scrolling (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* after the parts: arcade's own */
.btn.ghost { background: #ffffff; border-color: var(--ink); box-shadow: var(--shadow); }
.badge { border: 2px solid var(--ink); background: #ffc928; font-family: var(--display); }
.panel > .bar { background: var(--tint); border-bottom: 3px solid var(--ink); color: var(--ink); }
hr, .rule { border-top: 3px dashed var(--ink); }
.hud { font: 700 .8rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: #fff7ea;
  padding: .45em .8em; border-radius: 999px; display: inline-block; }