/* ==========================================================================
   Haru-key — landing page
   Scroll = one day. Every section is an hour of it (00:00 → 24:00).
   ========================================================================== */

.s { position: relative; overflow: hidden; overflow: clip; padding: clamp(76px, 12vw, 156px) 0; }
.s__time {
  position: absolute; top: .04em; left: -.05em; z-index: 0;
  font-family: var(--display); font-weight: 900; font-size: clamp(110px, 33vw, 460px); line-height: .8; letter-spacing: -.07em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: .075; pointer-events: none; -webkit-user-select: none; user-select: none;
  transform: translate3d(0, var(--py, 0px), 0);
}
.s > .wrap { z-index: 1; }
.dark .kicker__t, .s--every .kicker__t, .s--data .kicker__t, .s--nosub .kicker__t, .s--end .kicker__t {
  background: var(--lit); color: var(--ink); box-shadow: 0 3px 0 var(--lit-edge);
}

/* ======================= 00:00 HERO ======================= */
.s--hero { background: var(--brand); color: var(--ink); padding-top: calc(92px + env(safe-area-inset-top)); padding-bottom: 0; transition: background-color .5s; }
.board {
  position: relative;
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: clamp(10px, 1.9vw, 20px) clamp(8px, 1.7vw, 18px);
  margin: 6px 0 24px;
}
.hk {
  --c: var(--k1);
  --face: var(--cream); --edge-c: var(--cream-edge);
  --d: clamp(6px, 1.25vw, 13px); --r: clamp(14px, 2.7vw, 32px);
  grid-column: span 2;
  display: grid; place-items: center;
  aspect-ratio: 1 / 1.04; padding: 0;
  overflow: hidden; isolation: isolate;
  font-family: var(--display); color: var(--ink);
  box-shadow: 0 var(--d) 0 var(--edge-c), 0 calc(var(--d) + 14px) 26px -12px rgba(80, 8, 4, .5),
    inset 0 2px 0 rgba(255, 255, 255, .95), inset 0 -4px 10px rgba(120, 80, 20, .07);
}
.hk:nth-child(5) { grid-column: 2 / span 2; }
@media (min-width: 1000px) {
  .board { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .hk, .hk:nth-child(5) { grid-column: auto; }
}
.hk[data-c="0"] { --c: var(--k1); } .hk[data-c="1"] { --c: var(--k2); } .hk[data-c="2"] { --c: var(--k3); }
.hk[data-c="3"] { --c: var(--k4); } .hk[data-c="4"] { --c: var(--k5); } .hk[data-c="5"] { --c: var(--k6); }
.hk:active, .hk.is-down {
  box-shadow: 0 0 0 var(--edge-c), 0 4px 10px -6px rgba(80, 8, 4, .5), inset 0 2px 0 rgba(255, 255, 255, .95);
}
.hk__glyph {
  position: relative; z-index: 2;
  font-weight: 900; font-size: clamp(34px, 10.4vw, 100px); line-height: 1; letter-spacing: -.02em;
  translate: 0 .04em;
}
.hk--minus .hk__glyph { translate: 0 -.02em; }
.hk__sub {
  position: absolute; z-index: 2; top: 9%; left: 11%;
  font-family: var(--font); font-weight: 600; font-size: clamp(11px, 2.2vw, 21px); line-height: 1; opacity: .38;
}
.hk__fill {
  position: absolute; inset: 0; z-index: 1;
  background: var(--c); opacity: .92;
  transform: translate3d(calc((var(--p, 0) - 1) * 100%), 0, 0);
}
.hk__fill::after {
  content: ""; position: absolute; right: 0; top: 12%; bottom: 12%; width: 3px; border-radius: 3px;
  background: rgba(21, 24, 26, .25);
}
.hk:not(.is-running):not(.is-paused):not(.is-done) .hk__fill { visibility: hidden; }
.hk.is-running {
  --face: color-mix(in srgb, var(--c) 24%, var(--cream));
  box-shadow: 0 var(--d) 0 var(--edge-c), 0 calc(var(--d) + 14px) 26px -12px rgba(80, 8, 4, .5), inset 0 0 0 3px var(--c);
}
.hk.is-running.is-down, .hk.is-running:active { box-shadow: 0 0 0 var(--edge-c), inset 0 0 0 3px var(--c); }
.hk.is-paused .hk__fill { opacity: .5; }
.hk.is-done { --face: var(--c); --edge-c: color-mix(in srgb, var(--c) 64%, #000); }
.hk.is-done .hk__fill::after { display: none; }
.hk__ok {
  position: absolute; z-index: 3; top: 8%; right: 8%; width: 26%; aspect-ratio: 1; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 64% no-repeat;
  scale: 0; transition: scale .4s var(--spring);
}
.hk.is-done .hk__ok { scale: 1; }
.spark {
  position: absolute; z-index: 3; pointer-events: none;
  width: clamp(10px, 1.5vw, 18px); height: clamp(26px, 4.4vw, 54px); border-radius: 99px;
  background: var(--lit); box-shadow: 0 3px 0 var(--lit-edge);
}
.spark--a { top: -12%; right: 3%; rotate: 28deg; }
.spark--b { top: 4%; right: -1.2%; rotate: 62deg; height: clamp(20px, 3.4vw, 42px); }
@media (min-width: 1000px) { .spark--a { top: -22%; } .spark--b { top: -6%; } }

.hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 34px; }
.hint__txt { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-weight: 700; font-size: 15px; line-height: 1.35; }
.hint__txt .ico { margin-top: -1px; }
.hint__kb { display: none; font-weight: 600; opacity: .88; }
@media (hover: hover) and (pointer: fine) { .hint__kb { display: inline; } }
.hint__tools { display: flex; gap: 10px; flex: none; }
[data-soundtoggle] .ico--on { display: none; }
[data-soundtoggle][aria-pressed="true"] .ico--on { display: block; }
[data-soundtoggle][aria-pressed="true"] .ico--off { display: none; }
.minikey[aria-pressed="true"] { --face: var(--ink); --edge-c: #000; color: var(--lit); }

.hero__grid { display: grid; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: end; gap: 40px; }
}
.hero__copy { position: relative; z-index: 2; padding-bottom: 8px; }
.s--hero .display { font-size: clamp(46px, 12.2vw, 138px); }
@media (min-width: 1000px) { .s--hero .display { font-size: clamp(56px, 6vw, 100px); } }
.hero__name { margin: 26px 0 0; font-size: 14px; font-weight: 600; opacity: .9; max-width: 32em; }
.mascot {
  position: relative; z-index: 1;
  width: min(84vw, 540px); margin: 10px -12% -16% auto;
  rotate: -7deg; pointer-events: none;
}
.mascot img { display: block; width: 100%; height: auto; animation: bob 5.5s ease-in-out infinite; }
.mascot.is-jump img { animation: jump .9s var(--spring); }
@media (min-width: 1000px) { .mascot { margin: 0 -8% -14% auto; } }
@keyframes bob { 50% { translate: 0 -10px; rotate: 2deg; } }
@keyframes jump { 0% { translate: 0 0; } 35% { translate: 0 -60px; rotate: -8deg; } 70% { translate: 0 6px; } 100% { translate: 0 0; } }

/* ======================= 07:00 DEMO ======================= */
.s--demo { background: var(--paper); color: var(--ink); }
.say { margin: 36px 0 20px; }
.say__line {
  display: flex; align-items: flex-end; gap: 12px;
  padding-bottom: 12px; border-bottom: 4px solid var(--ink);
  transition: border-color .2s;
}
.say__line:focus-within { border-color: var(--brand); }
.say__input {
  flex: 1; min-width: 0; min-height: 1.25em; padding: 0; margin: 0;
  border: 0; outline: 0; resize: none; overflow: hidden; background: transparent;
  color: var(--ink); caret-color: var(--brand);
  font-family: var(--display); font-weight: 800; font-size: clamp(22px, 4.3vw, 44px); line-height: 1.2; letter-spacing: -.02em;
}
.say__input::placeholder { color: rgba(21, 24, 26, .5); }
.retkey {
  --face: var(--lit); --edge-c: var(--lit-edge); --d: 6px; --r: 16px;
  flex: none; display: grid; justify-items: center; gap: 2px;
  min-width: 86px; max-width: 120px; padding: 10px 12px; margin-bottom: 6px;
  color: var(--ink); font-weight: 800;
}
.retkey__glyph { font-size: 26px; line-height: 1; }
.retkey__label { font-size: 12.5px; line-height: 1.15; }
.say__note { margin: 14px 0 0; font-weight: 700; color: var(--miss); max-width: 40em; }
.chips { margin: 0 0 8px; }
.chips__label { margin: 0 0 12px; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.chips__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 10px; }
.chip { --r: 12px; --d: 4px; padding: 10px 14px; font-size: 15px; font-weight: 600; line-height: 1.3; text-align: left; color: var(--ink); }
.chip.is-on { --face: var(--ink); --edge-c: #000; color: #fff; }

.born { margin-top: 42px; }
.receipt {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px;
  margin: 0 0 16px; border: 3px solid var(--ink); border-radius: 20px; overflow: hidden; background: var(--ink);
}
@media (min-width: 760px) { .receipt { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rc { min-width: 0; margin: 0; padding: 12px 14px 14px; background: var(--key); animation: rcIn .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.rc dt { font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); overflow-wrap: anywhere; }
.rc dd { margin: 4px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(18px, 2.5vw, 26px); line-height: 1.15; overflow-wrap: anywhere; }
.rc--empty dd { color: var(--ink-3); }
.rc__def {
  display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 6px; vertical-align: .2em;
  background: #ECEFED; color: var(--ink-2); font: 700 10px var(--mono); letter-spacing: .04em; text-transform: uppercase;
}
@keyframes rcIn { from { opacity: 0; translate: 0 12px; } }
.born__hint { margin: 22px 0 12px; font-weight: 800; font-size: 15px; }

/* ---------- routine key (demo, preview, mock-ups) ---------- */
.rkey {
  --c: var(--k2); --face: var(--key); --edge-c: var(--edge); --r: 22px; --d: 5px; --line-c: transparent;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 84px; margin: 0; padding: 16px 14px 16px 20px;
  border: 0; border-radius: var(--r);
  background: var(--face); color: var(--ink); font: inherit; text-align: left;
  box-shadow: 0 var(--d) 0 var(--edge-c), 0 calc(var(--d) + 10px) 22px -14px rgba(0, 0, 0, .35), inset 0 0 0 1.5px var(--line-c);
  transition: translate .08s, box-shadow .08s, background-color .3s, color .3s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button.rkey { cursor: pointer; }
button.rkey:active { translate: 0 var(--d); box-shadow: 0 0 0 var(--edge-c), inset 0 0 0 1.5px var(--line-c); }
.rkey__fill {
  position: absolute; inset: 0; z-index: -1;
  background: var(--c); opacity: .85;
  transform: translate3d(calc((var(--p, 0) - 1) * 100%), 0, 0);
}
.rkey__fill::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: rgba(21, 24, 26, .2); }
.rkey:not(.is-running):not(.is-paused) .rkey__fill { visibility: hidden; }
.rkey__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c); }
.rkey__face { display: none; flex: none; width: 40px; height: 37px; }
.rkey__text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.rkey__name { font-weight: 700; font-size: 19px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rkey__sub { font-size: 14.5px; line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rkey__sub em { font-style: normal; font-weight: 700; color: var(--miss); }
.rkey__sub .bell {
  display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border-radius: 5px;
  background: rgba(21, 24, 26, .08); font-size: .92em;
}
.rkey__sub .bell svg { width: 11px; height: 11px; }
.rkey__btn { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; }
.rkey__btn svg { width: 20px; height: 20px; }
.rkey.is-running { --face: color-mix(in srgb, var(--c) 26%, #fff); --line-c: var(--c); }
.rkey.is-paused { --line-c: color-mix(in srgb, var(--c) 80%, transparent); }
.rkey.is-paused .rkey__fill { opacity: .45; }
.rkey.is-done { --face: var(--c); --edge-c: color-mix(in srgb, var(--c) 66%, #000); }
.rkey.is-done .rkey__dot { display: none; }
.rkey.is-done .rkey__sub { color: rgba(21, 24, 26, .72); }
.rkey.is-done .rkey__btn { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); }
.rkey.is-missed { --face: var(--paper); --line-c: var(--line); }
.rkey.is-missed .rkey__btn { background: transparent; color: var(--miss); box-shadow: inset 0 0 0 2.5px var(--miss); }
.rkey.is-born { animation: born .75s var(--spring); }
@keyframes born { 0% { scale: .7 .15; opacity: 0; } 55% { scale: 1.03 1.08; opacity: 1; } 100% { scale: 1 1; } }
.rkey--demo { min-height: 96px; }
@media (min-width: 760px) {
  .rkey--demo { min-height: 118px; padding: 20px 22px 20px 28px; gap: 18px; }
  .rkey--demo .rkey__name { font-size: 27px; }
  .rkey--demo .rkey__sub { font-size: 17px; }
  .rkey--demo .rkey__btn { width: 62px; height: 62px; }
  .rkey--demo .rkey__btn svg { width: 24px; height: 24px; }
  .rkey--demo .rkey__dot { width: 13px; height: 13px; }
}
.demo__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; margin: 24px 0 28px; }
.week { padding-top: 18px; border-top: 3px solid var(--ink); }
.week__day { margin: 0 0 12px; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.week__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; max-width: 540px; }
.wd { display: grid; justify-items: center; gap: 6px; font: 700 11.5px var(--mono); color: var(--ink-2); }
.wd svg { display: block; width: 100%; max-width: 48px; aspect-ratio: 1; }
.wd.is-today { color: var(--ink); }
.wd.is-new svg { animation: stamp .55s var(--spring); }
@keyframes stamp { 0% { scale: 1.9; opacity: 0; } 100% { scale: 1; opacity: 1; } }
.week__sum { margin: 16px 0 0; font-weight: 700; min-height: 1.5em; }

/* ======================= 12:00 THREE ENDINGS ======================= */
.s--tokens { background: var(--lit); color: var(--ink); }
.s--tokens .kicker__t { box-shadow: 0 3px 0 #000; }
.tokens { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 30px; }
.token { display: grid; grid-template-columns: minmax(104px, 36vw) minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 20px; }
.token__coin {
  grid-row: 1 / 3; display: block; aspect-ratio: 1; padding: 9%; border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 clamp(7px, 1.4vw, 12px) 0 #CDBF9C, 0 26px 34px -18px rgba(90, 60, 0, .6), inset 0 3px 0 #fff;
  animation: coin 6s ease-in-out infinite;
}
.token:nth-child(2) .token__coin { animation-delay: -2s; }
.token:nth-child(3) .token__coin { animation-delay: -4s; }
.token__coin svg { display: block; width: 100%; height: 100%; }
@keyframes coin { 50% { translate: 0 -8px; rotate: -4deg; } }
.token__name { align-self: end; margin: 0 0 6px; font-family: var(--display); font-weight: 900; font-size: clamp(30px, 5.2vw, 56px); line-height: 1; letter-spacing: -.03em; }
.token__txt { align-self: start; margin: 0; font-size: 16px; font-weight: 500; max-width: 24em; }
@media (min-width: 900px) {
  .tokens { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
  .token { grid-template-columns: 1fr; grid-template-rows: auto; align-items: start; }
  .token__coin { grid-row: auto; width: min(100%, 250px); margin-bottom: 34px; }
}
.tokens__foot { margin: 48px 0 0; max-width: 32em; font-weight: 800; font-size: clamp(18px, 2.2vw, 25px); line-height: 1.35; }

/* ======================= 14:00 VIEWS ======================= */
.s--views { background: var(--paper); color: var(--ink); }
.bgrid {
  display: grid; gap: 3px; margin-top: 38px;
  background: var(--ink); border: 3px solid var(--ink); border-radius: 26px; overflow: hidden;
}
@media (min-width: 900px) {
  .bgrid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cell--today { grid-column: span 5; }
  .cell--week { grid-column: span 7; }
  .cell--month { grid-column: span 5; grid-row: span 2; }
  .cell--stats { grid-column: span 4; }
  .cell--streak { grid-column: span 3; }
  .cell--share { grid-column: span 7; }
}
.cell { position: relative; min-width: 0; padding: 18px 16px 22px; background: var(--key); }
@media (min-width: 760px) { .cell { padding: 22px 22px 26px; } }
.cell__tag { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cell__tag b { padding: 3px 6px; border-radius: 6px; background: var(--ink); color: #fff; }
.cell__big { margin: 0 0 14px; font-family: var(--display); font-weight: 900; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; letter-spacing: -.02em; }
.cell__sub { margin: 0 0 12px; font-weight: 700; color: var(--ink-2); }
.mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mini .rkey, .stage .rkey { --r: 17px; --d: 4px; min-height: 64px; padding: 11px 11px 11px 15px; gap: 11px; }
.mini .rkey__name, .stage .rkey__name { font-size: 16.5px; }
.mini .rkey__sub, .stage .rkey__sub { font-size: 13px; }
.mini .rkey__btn, .stage .rkey__btn { width: 38px; height: 38px; }
.mini .rkey__btn svg, .stage .rkey__btn svg { width: 16px; height: 16px; }
.b7 { display: grid; gap: 14px; }
.b7__days, .b7__cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; justify-items: center; }
.b7__days span { font: 700 11px var(--mono); color: var(--ink-2); }
.b7__days span.is-today { color: var(--ink); text-decoration: underline 2px; text-underline-offset: 3px; }
.b7__head { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-weight: 700; font-size: 15px; }
.b7__head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b7__head small { flex: none; font: 700 12px var(--mono); color: var(--ink-2); }
.b7__cells svg { display: block; width: 100%; max-width: 32px; aspect-ratio: 1; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px 4px; }
.cal__h { font: 700 11px var(--mono); color: var(--ink-2); text-align: center; }
.cal svg { display: block; width: 100%; max-width: 42px; aspect-ratio: 1; margin: 0 auto; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 16px 0 0; font-size: 13px; font-weight: 700; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend svg { width: 16px; height: 16px; flex: none; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; }
.stats dd { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(26px, 4.4vw, 44px); line-height: 1; letter-spacing: -.03em; overflow-wrap: anywhere; }
.stats dt { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.cell--streak { background: var(--lit); }
.cell--streak .cell__tag b { background: var(--ink); }
.streak { margin: 0; font-weight: 800; font-size: 18px; line-height: 1.1; }
.streak b { font-family: var(--display); font-weight: 900; font-size: clamp(76px, 12vw, 140px); line-height: .9; letter-spacing: -.05em; }
.cell--share { background: #EEF2EF; }
.sharecard {
  position: relative; max-width: 440px; margin: 8px auto 6px; padding: 20px 20px 22px;
  border-radius: 28px; background: var(--ink); color: #fff; rotate: -2.5deg;
  box-shadow: 0 9px 0 #000, 0 34px 44px -24px rgba(0, 0, 0, .6);
}
.sharecard__brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.sharecard__brand img { width: 26px; height: 26px; border-radius: 7px; }
.sharecard__streak { position: absolute; top: 16px; right: 16px; padding: 6px 10px; border-radius: 10px; background: var(--lit); color: var(--ink); font-weight: 800; font-size: 13px; box-shadow: 0 3px 0 var(--lit-edge); }
.sharecard__name { margin: 18px 0 4px; font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3.6vw, 34px); line-height: 1.05; letter-spacing: -.02em; }
.sharecard__meta { margin: 0 0 18px; font-size: 14px; color: #B8C0BC; }
.sharecard__toks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.sharecard__toks svg { display: block; width: 100%; aspect-ratio: 1; }

/* ======================= 17:00 EVERYWHERE ======================= */
.s--every { background: var(--ink); color: #F3F5F3; --focus: var(--lit); }
.s--every .s__time { color: #fff; opacity: .06; }
.every__grid { display: grid; }
@media (min-width: 980px) {
  .every__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 40px; }
  .every__grid .devkeys { margin-top: 0; }
}
.devices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; align-items: center; justify-items: center; margin: 36px 0 34px; }
@media (min-width: 980px) { .devices { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px 22px; margin: 0; } }
.phone {
  grid-column: 1 / -1; position: relative; overflow: hidden;
  width: min(88%, 340px); aspect-ratio: 9 / 19;
  border: 11px solid #050607; border-radius: 56px;
  background:
    radial-gradient(120% 70% at 85% 12%, #3F7BF0 0%, transparent 58%),
    radial-gradient(90% 60% at 0% 78%, #14A58B 0%, transparent 60%),
    linear-gradient(160deg, #10306A, #0A1A3C 55%, #060D1C);
  box-shadow: 0 0 0 2px #30363A, 0 50px 90px -40px rgba(0, 0, 0, .95);
  color: #fff;
}
@media (min-width: 980px) { .phone { grid-column: auto; grid-row: span 2; } }
.phone__date { position: absolute; top: 15%; left: 0; right: 0; margin: 0; text-align: center; font-size: 15px; font-weight: 600; opacity: .88; }
.phone__clock { position: absolute; top: 18.5%; left: 0; right: 0; margin: 0; text-align: center; font-family: var(--display); font-weight: 800; font-size: clamp(64px, 23vw, 88px); line-height: 1; letter-spacing: -.02em; color: rgba(255, 255, 255, .93); }
.island {
  position: absolute; z-index: 2; top: 10px; left: 50%; translate: -50% 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  width: 36%; height: 32px; padding: 0 10px; border-radius: 20px; overflow: hidden;
  background: #000; color: #fff;
  transition: width .55s var(--spring), height .55s var(--spring), border-radius .55s, padding .55s;
}
.island__key { width: 18px; height: 18px; flex: none; border-radius: 6px; background: var(--k4); box-shadow: 0 2px 0 #B9566F; }
.island__name { display: none; font-weight: 700; font-size: 14px; }
.island__time { margin-left: auto; font: 700 13px var(--mono); color: var(--k4); font-variant-numeric: tabular-nums; }
.island__bar { display: none; flex-basis: 100%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.island__bar i { display: block; height: 100%; width: 0; background: var(--k4); }
.island.is-open { width: 92%; height: 84px; border-radius: 34px; padding: 12px 16px; align-content: center; }
.island.is-open .island__key { width: 30px; height: 30px; border-radius: 9px; }
.island.is-open .island__name { display: block; }
.island.is-open .island__time { font-size: 24px; }
.island.is-open .island__bar { display: block; }
.la {
  position: absolute; left: 3.5%; right: 3.5%; bottom: 4.5%;
  padding: 12px 12px 10px; border-radius: 26px;
  background: rgba(24, 27, 29, .93); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.la__top { display: flex; align-items: center; gap: 10px; }
.la__key { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--k4); color: var(--ink); box-shadow: 0 3px 0 #B9566F; }
.la__key svg { width: 18px; height: 18px; }
.la__txt { display: grid; flex: 1; min-width: 0; }
.la__txt b { font-size: 16px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la__txt small { font-size: 11.5px; color: #A6ADA9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la__time { flex: none; font: 700 28px var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.la__bar { display: block; height: 4px; margin: 10px 0 8px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.la__bar i { display: block; height: 100%; width: 0; background: var(--k4); }
.la__list { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 5px; font-size: 12.5px; }
.la__list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.la__list li > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la__list i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.la__list .la__v { flex: none; color: #BFC6C2; font-variant-numeric: tabular-nums; }
.la__list .is-miss .la__v { color: #FF7A5C; }
.la__list .la__more { justify-content: flex-end; color: #8E9692; }
.watch {
  position: relative; width: min(100%, 176px); aspect-ratio: .82; padding: 10px;
  border-radius: 46px; background: #050607;
  box-shadow: 0 0 0 2px #30363A, 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.watch::after { content: ""; position: absolute; right: -7px; top: 26%; width: 8px; height: 18%; border-radius: 4px; background: #30363A; }
.watch__face { position: relative; height: 100%; border-radius: 36px; background: #000; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; overflow: hidden; }
.watch__ring { position: absolute; inset: 9%; width: 82%; height: 82%; }
.watch__name { position: relative; max-width: 7.5em; font-size: 13px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch__time { position: relative; font: 700 22px var(--mono); letter-spacing: -.02em; color: var(--k4); font-variant-numeric: tabular-nums; }
.widget {
  position: relative; width: min(100%, 176px); aspect-ratio: 1; border-radius: 38px;
  background: #fff; color: var(--ink);
  display: grid; place-content: center; justify-items: center; gap: 0;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.widget__ring { position: absolute; inset: 13%; width: 74%; height: 74%; }
.widget__num { position: relative; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; }
.widget__lbl { position: relative; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.devkeys { list-style: none; margin: 32px 0 36px; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 10px; }
.devkey {
  --face: #262B2E; --edge-c: #060708; --r: 12px; --d: 5px;
  padding: 11px 15px; color: #fff; font-weight: 700; font-size: 15px; line-height: 1.2; cursor: default;
  box-shadow: 0 var(--d) 0 var(--edge-c), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.feats {
  display: grid; gap: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .14); border: 3px solid rgba(255, 255, 255, .14); border-radius: 24px;
}
@media (min-width: 760px) { .feats { grid-template-columns: 1fr 1fr; } }
.feat { padding: 22px 20px 24px; background: var(--ink); }
.feat h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.15; }
.feat p { margin: 0; font-size: 15.5px; color: #C2C9C5; }

/* ======================= 19:00 MAKE IT YOURS — skins ======================= */
[data-skin] {
  --sk-paper: #F6F7F5; --sk-ink: #15181A; --sk-ink2: #5B6361; --sk-key: #FFFFFF; --sk-edge: #CCD2CE; --sk-line: #DADFDC;
  --sk-lit: #FFD43B; --sk-miss: #BF4A30; --sk-r: 20px; --sk-d: 4px; --sk-font: var(--font); --sk-w: 700;
  --sk-k1: #FFD43B; --sk-k2: #5CC8F2; --sk-k3: #7ED957; --sk-k4: #FF8FAB; --sk-k5: #FFA24C;
  --sk-bd: none; --sk-card-edge: rgba(0, 0, 0, .12);
}
[data-skin="casual"] {
  --sk-paper: #FFF8EE; --sk-edge: #EADCC6; --sk-line: #F0E5D3; --sk-lit: #FFC247; --sk-miss: #FF6B6B;
  --sk-r: 27px; --sk-d: 6px; --sk-font: var(--display);
  --sk-k1: #FFC247; --sk-k2: #7FA8FF; --sk-k3: #6FDDB2; --sk-k4: #FF8FB1; --sk-k5: #FFA96B;
  --sk-bd: radial-gradient(circle, rgba(21, 24, 26, .09) 1.6px, transparent 1.8px) 0 0 / 18px 18px;
}
[data-skin="serious"] {
  --sk-paper: #F1F2F4; --sk-ink: #1D2733; --sk-ink2: #5D6773; --sk-edge: transparent; --sk-line: #D9DDE3; --sk-lit: #5B7FA3; --sk-miss: #9A3B2E;
  --sk-r: 8px; --sk-d: 0px; --sk-w: 600;
  --sk-k1: #5B7FA3; --sk-k2: #6E8F6A; --sk-k3: #A3765B; --sk-k4: #7A6FA3; --sk-k5: #A35B6E;
  --sk-bd: linear-gradient(rgba(29, 39, 51, .06) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(29, 39, 51, .06) 1px, transparent 1px) 0 0 / 22px 22px;
}
[data-skin="luxe"] {
  --sk-paper: #111214; --sk-ink: #ECE4D0; --sk-ink2: #A39B88; --sk-key: #1B1C1F; --sk-edge: transparent; --sk-line: #34332F;
  --sk-lit: #C9A45C; --sk-miss: #C0674F; --sk-r: 14px; --sk-d: 0px; --sk-w: 500;
  --sk-font: "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "AppleMyungjo", "Noto Serif KR", "Hiragino Mincho ProN", "Songti SC", serif;
  --sk-k1: #C9A45C; --sk-k2: #7FA7C9; --sk-k3: #8FC98A; --sk-k4: #C98F9F; --sk-k5: #B8A1D9;
  --sk-bd: radial-gradient(120% 90% at 50% 35%, transparent 45%, rgba(0, 0, 0, .65));
  --sk-card-edge: #000;
}
[data-skin="digital"] {
  --sk-paper: #07100B; --sk-ink: #39FF88; --sk-ink2: rgba(57, 255, 136, .62); --sk-key: #0A1811; --sk-edge: transparent; --sk-line: rgba(57, 255, 136, .28);
  --sk-lit: #39FF88; --sk-miss: #FF5A5A; --sk-r: 5px; --sk-d: 0px; --sk-font: var(--mono); --sk-w: 600;
  --sk-k1: #39FF88; --sk-k2: #3DE7FF; --sk-k3: #FFD23D; --sk-k4: #FF6BD5; --sk-k5: #A0FF3D;
  --sk-bd: repeating-linear-gradient(0deg, rgba(57, 255, 136, .06) 0 1px, transparent 1px 3px);
  --sk-card-edge: #000;
}
[data-skin="cartoon"] {
  --sk-paper: #FFF4D6; --sk-edge: transparent; --sk-line: #15181A; --sk-lit: #FFD400; --sk-miss: #FF4D4D;
  --sk-r: 18px; --sk-d: 0px; --sk-font: var(--display); --sk-w: 900;
  --sk-k1: #FFD400; --sk-k2: #FF5FA2; --sk-k3: #3DC5FF; --sk-k4: #7CE35A; --sk-k5: #FF8A2B;
  --sk-bd: radial-gradient(circle, rgba(21, 24, 26, .13) 1.3px, transparent 1.5px) 0 0 / 9px 9px;
  --sk-card-edge: #15181A;
}
[data-skin="neon"] {
  --sk-paper: #0B0820; --sk-ink: #F4F2FF; --sk-ink2: #ABA4CE; --sk-key: #161039; --sk-edge: transparent; --sk-line: #2E2660;
  --sk-lit: #FF2E93; --sk-miss: #FF3B30; --sk-r: 22px; --sk-d: 0px; --sk-w: 800;
  --sk-k1: #FF2E93; --sk-k2: #00E5FF; --sk-k3: #B6FF00; --sk-k4: #FFB800; --sk-k5: #8B5CFF;
  --sk-bd: radial-gradient(70% 45% at 15% 8%, rgba(255, 46, 147, .38), transparent 70%), radial-gradient(60% 45% at 95% 55%, rgba(0, 229, 255, .26), transparent 70%), radial-gradient(60% 40% at 30% 100%, rgba(139, 92, 255, .4), transparent 70%);
  --sk-card-edge: #000;
}
[data-skin="block"] {
  --sk-paper: #FFFFFF; --sk-edge: transparent; --sk-line: #15181A; --sk-lit: #15181A; --sk-miss: #8A8F94;
  --sk-r: 0px; --sk-d: 0px; --sk-w: 900;
  --sk-k1: #15181A; --sk-k2: #15181A; --sk-k3: #15181A; --sk-k4: #15181A; --sk-k5: #15181A;
  --sk-card-edge: #15181A;
}
[data-skin="buddies"] {
  --sk-paper: #F3F7FF; --sk-edge: #D6DFEF; --sk-line: #E3E9F5; --sk-lit: #FFC247; --sk-miss: #FF6B6B;
  --sk-r: 28px; --sk-d: 5px; --sk-font: var(--display);
  --sk-k1: #FFC247; --sk-k2: #7FA8FF; --sk-k3: #6FDDB2; --sk-k4: #FF8FB1; --sk-k5: #FFA96B;
  --sk-bd: radial-gradient(circle at 12% 18%, rgba(127, 168, 255, .28) 0 46px, transparent 47px), radial-gradient(circle at 88% 64%, rgba(255, 143, 177, .24) 0 70px, transparent 71px), radial-gradient(circle at 55% 97%, rgba(111, 221, 178, .28) 0 40px, transparent 41px);
}

.s--skins { background: var(--sk-paper); color: var(--sk-ink); transition: background-color .5s, color .5s; }
.s--skins::before { content: ""; position: absolute; inset: 0; background: var(--sk-bd); pointer-events: none; }
.s--skins .s__time { color: var(--sk-ink); }
.s--skins .kicker__t { background: var(--sk-ink); color: var(--sk-paper); box-shadow: none; }
.s--skins { --focus: var(--sk-ink); }

/* skin-aware routine key (inside a [data-skin] scope) */
[data-skin] .rkey { --face: var(--sk-key); --edge-c: var(--sk-edge); --r: var(--sk-r); --d: var(--sk-d); color: var(--sk-ink); font-family: var(--sk-font); }
[data-skin] .rkey__name { font-weight: var(--sk-w); }
[data-skin] .rkey__sub { color: var(--sk-ink2); }
[data-skin] .rkey__btn { background: var(--sk-ink); color: var(--sk-paper); }
[data-skin] .rkey.is-running { --face: color-mix(in srgb, var(--c) 26%, var(--sk-key)); }
[data-skin] .rkey.is-missed { --face: var(--sk-paper); --line-c: var(--sk-line); }
[data-skin] .rkey.is-missed .rkey__sub em { color: var(--sk-miss); }
[data-skin] .rkey.is-missed .rkey__btn { background: transparent; color: var(--sk-miss); box-shadow: inset 0 0 0 2.5px var(--sk-miss); }
[data-skin] .rkey.is-done .rkey__btn { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); }
[data-skin] .rkey.is-done { --face: var(--c); --edge-c: color-mix(in srgb, var(--c) 66%, #000); color: var(--ink); }
[data-skin] .rkey.is-done .rkey__sub { color: rgba(21, 24, 26, .72); }
/* puffy */
[data-skin="casual"] .rkey, [data-skin="buddies"] .rkey { --face: color-mix(in srgb, var(--c) 24%, var(--sk-key)); }
[data-skin="casual"] .rkey__fill, [data-skin="buddies"] .rkey__fill {
  background-color: var(--c);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .32) 0 8px, transparent 8px 16px);
  border-radius: 0 16px 16px 0; opacity: .95;
}
[data-skin="casual"] .rkey__btn, [data-skin="buddies"] .rkey__btn { background: var(--ink); color: #fff; }
[data-skin="buddies"] .rkey__dot { display: none; }
[data-skin="buddies"] .rkey__face { display: block; }
/* formal: flat card, left band, bottom progress bar */
[data-skin="serious"] .rkey { --line-c: var(--sk-line); padding-left: 24px; }
[data-skin="serious"] .rkey::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
[data-skin="serious"] .rkey.is-missed::before { background: var(--sk-miss); }
[data-skin="serious"] .rkey__dot { display: none; }
[data-skin="serious"] .rkey__fill { top: auto; height: 5px; opacity: 1; }
[data-skin="serious"] .rkey.is-running { --face: var(--sk-key); }
[data-skin="serious"] .rkey__btn { border-radius: 8px; }
/* luxe: gold hairline frame, glow progress */
[data-skin="luxe"] .rkey { --line-c: var(--sk-line); }
[data-skin="luxe"] .rkey::after { content: ""; position: absolute; inset: 5px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); pointer-events: none; }
[data-skin="luxe"] .rkey__fill { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 5%, transparent), color-mix(in srgb, var(--c) 50%, transparent)); opacity: 1; }
[data-skin="luxe"] .rkey__fill::after { background: var(--c); width: 1.5px; }
[data-skin="luxe"] .rkey.is-running { --face: var(--sk-key); }
[data-skin="luxe"] .rkey.is-done { --face: var(--sk-key); color: var(--c); }
[data-skin="luxe"] .rkey.is-done .rkey__sub { color: var(--sk-ink2); }
[data-skin="luxe"] .rkey.is-done .rkey__btn { color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }
[data-skin="luxe"] .rkey__btn { background: transparent; color: var(--sk-lit); box-shadow: inset 0 0 0 1.5px var(--sk-lit); }
/* digital LCD: segmented progress */
[data-skin="digital"] .rkey { --line-c: color-mix(in srgb, var(--c) 40%, transparent); color: var(--c); }
[data-skin="digital"] .rkey__name { text-transform: uppercase; letter-spacing: .02em; }
[data-skin="digital"] .rkey__sub { color: color-mix(in srgb, var(--c) 65%, transparent); }
[data-skin="digital"] .rkey__fill { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, transparent) 0 calc(8.33% - 3px), transparent calc(8.33% - 3px) 8.33%); opacity: 1; inset: 4px; }
[data-skin="digital"] .rkey__fill::after { display: none; }
[data-skin="digital"] .rkey.is-running { --face: var(--sk-key); --line-c: var(--c); }
[data-skin="digital"] .rkey.is-done { --face: var(--sk-key); color: var(--c); --line-c: var(--c); }
[data-skin="digital"] .rkey.is-done .rkey__sub { color: color-mix(in srgb, var(--c) 65%, transparent); }
[data-skin="digital"] .rkey__btn, [data-skin="digital"] .rkey.is-done .rkey__btn { border-radius: 4px; background: transparent; color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }
[data-skin="digital"] .rkey.is-missed { color: var(--sk-miss); --line-c: color-mix(in srgb, var(--sk-miss) 60%, transparent); }
/* cartoon: thick outline, hard shadow */
[data-skin="cartoon"] .rkey { --line-c: var(--ink); box-shadow: 4px 5px 0 var(--ink), inset 0 0 0 2.5px var(--ink); }
[data-skin="cartoon"] button.rkey:active { translate: 3px 4px; box-shadow: 1px 1px 0 var(--ink), inset 0 0 0 2.5px var(--ink); }
[data-skin="cartoon"] .rkey__fill { opacity: 1; }
[data-skin="cartoon"] .rkey__fill::after { width: 2.5px; background: var(--ink); }
[data-skin="cartoon"] .rkey.is-running { --face: var(--sk-key); }
[data-skin="cartoon"] .rkey__btn { background: var(--c); color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); }
[data-skin="cartoon"] .rkey.is-missed { --face: var(--sk-paper); }
/* saturated neon */
[data-skin="neon"] .rkey { --line-c: color-mix(in srgb, var(--c) 35%, transparent); }
[data-skin="neon"] .rkey.is-running, [data-skin="neon"] .rkey.is-done {
  --face: var(--sk-key); color: var(--sk-ink);
  box-shadow: inset 0 0 0 1.5px var(--c), 0 0 14px color-mix(in srgb, var(--c) 70%, transparent), 0 0 30px color-mix(in srgb, var(--c) 35%, transparent);
}
[data-skin="neon"] .rkey.is-done { --face: color-mix(in srgb, var(--c) 28%, var(--sk-key)); }
[data-skin="neon"] .rkey.is-done .rkey__sub { color: var(--sk-ink2); }
[data-skin="neon"] .rkey__fill { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 12%, transparent), color-mix(in srgb, var(--c) 72%, transparent)); opacity: 1; }
[data-skin="neon"] .rkey__fill::after { background: #fff; box-shadow: 0 0 8px var(--c); }
[data-skin="neon"] .rkey__btn { background: var(--c); color: #0B0820; }
[data-skin="neon"] .rkey.is-done .rkey__btn { color: var(--c); box-shadow: inset 0 0 0 2px var(--c); background: transparent; }
/* square mono */
[data-skin="block"] .rkey { --line-c: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
[data-skin="block"] .rkey__fill { background: var(--ink); opacity: .14; }
[data-skin="block"] .rkey__fill::after { width: 3px; background: var(--ink); }
[data-skin="block"] .rkey.is-running { --face: #fff; }
[data-skin="block"] .rkey.is-done { --face: var(--ink); color: #fff; }
[data-skin="block"] .rkey.is-done .rkey__sub { color: rgba(255, 255, 255, .7); }
[data-skin="block"] .rkey.is-done .rkey__btn { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
[data-skin="block"] .rkey__btn { border-radius: 0; }
[data-skin="block"] .rkey.is-missed { --line-c: var(--sk-line); box-shadow: inset 0 0 0 2px #C9CDD0; }
[data-skin="block"] .rkey__dot { border-radius: 0; }

/* skin picker */
.skinlab { display: grid; gap: 30px; margin-top: 32px; }
@media (min-width: 980px) { .skinlab { grid-template-columns: minmax(0, 1fr) 390px; align-items: start; gap: 52px; } }
.skinpick { min-width: 0; margin: 0; padding: 0; border: 0; }
.skinpick__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
.skinopt { position: relative; display: block; }
.skinopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.skinopt__cap {
  display: grid; gap: 10px; align-content: start;
  min-width: 0; overflow-wrap: anywhere;
  min-height: 100%; padding: 10px 10px 12px; border-radius: 16px;
  background: #fff; color: var(--ink);
  box-shadow: 0 5px 0 #C3CAC6, 0 16px 24px -16px rgba(0, 0, 0, .45);
  font-weight: 800; font-size: 13.5px; line-height: 1.2; cursor: pointer;
  transition: translate .08s, box-shadow .08s, background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.skinopt__cap:active { translate: 0 5px; box-shadow: 0 0 0 #C3CAC6; }
.skinopt input:checked + .skinopt__cap { translate: 0 5px; background: var(--lit); box-shadow: 0 0 0 #C3CAC6, inset 0 0 0 2.5px var(--ink); }
.skinopt input:focus-visible + .skinopt__cap { outline: 3px solid var(--focus); outline-offset: 3px; }
.skinopt__mini {
  position: relative; display: block; height: 30px; border-radius: 10px; overflow: hidden; pointer-events: none;
  background: var(--sk-paper); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); padding: 5px;
}
.skinopt__mini .rkey { min-height: 20px; height: 20px; padding: 0 6px; gap: 4px; --p: .55; box-shadow: inset 0 0 0 1px var(--line-c); }
.skinopt__mini .rkey::after, .skinopt__mini .rkey::before { display: none; }
[data-skin="cartoon"] .skinopt__mini .rkey { box-shadow: 1.5px 2px 0 var(--ink), inset 0 0 0 1.5px var(--ink); }
.skinopt__mini .rkey__dot { width: 5px; height: 5px; }
.skinopt__mini .rkey__text, .skinopt__mini .rkey__btn, .skinopt__mini .rkey__face { display: none; }
.skinpick__desc { margin: 18px 0 18px; min-height: 1.6em; font-weight: 700; font-size: 16px; }
.switch--wear .switch__txt { font-weight: 800; }

/* the preview phone */
.stage { justify-self: center; width: min(100%, 380px); }
.stage__screen {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 560px; padding: 28px 14px 24px;
  border: 10px solid #050607; border-radius: 46px;
  background: var(--sk-paper); color: var(--sk-ink); font-family: var(--sk-font);
  box-shadow: 0 0 0 2px #30363A, 0 44px 80px -36px rgba(0, 0, 0, .7);
  transition: background-color .5s, color .5s;
}
.stage__screen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sk-bd); }
.stage__photo { position: absolute; inset: 0; z-index: -1; opacity: 0; background: center / cover no-repeat; transition: opacity .4s; }
.stage__photo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .22); }
.stage.has-photo .stage__photo { opacity: 1; }
.stage.has-photo .stage__head { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.stage.has-photo .stage__date { color: rgba(255, 255, 255, .85); }
.stage__head { position: relative; margin: 0 6px 16px; min-height: 52px; }
.stage__date { margin: 0; font-size: 13px; color: var(--sk-ink2); }
.stage__title { margin: 2px 0 0; font-weight: 800; font-size: 25px; line-height: 1.15; letter-spacing: -.02em; }
[data-skin="luxe"] .stage__title { font-weight: 500; letter-spacing: .01em; }
[data-skin="block"] .stage__title { font-weight: 900; letter-spacing: -.04em; }
[data-skin="digital"] .stage__title { text-transform: uppercase; font-weight: 600; }
.stage__haru { display: none; position: absolute; right: 0; top: 0; width: 46px; height: 43px; }
[data-skin="casual"] .stage__haru { display: block; }
.stage__keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }

/* customise cards */
.custom { display: grid; gap: 18px; margin-top: 44px; }
@media (min-width: 760px) { .custom { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .custom { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card {
  position: relative; padding: 20px 18px 22px; border-radius: 24px;
  background: var(--sk-key); color: var(--sk-ink);
  box-shadow: 0 6px 0 var(--sk-card-edge), inset 0 0 0 1.5px var(--sk-line);
  transition: background-color .5s, color .5s;
}
.card h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.15; }
.card p { margin: 0 0 16px; font-size: 15px; color: var(--sk-ink2); }
.card .card__note { margin: 12px 0 0; font-size: 13px; }
.card .btnkey { color: var(--ink); }
.card .btnkey--ghost { color: var(--sk-ink); }
.swatches { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.swatch {
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--c); box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 62%, #000);
  transition: translate .08s, box-shadow .08s;
  -webkit-tap-highlight-color: transparent;
}
.swatch:active { translate: 0 5px; box-shadow: 0 0 0 transparent; }
.swatch[aria-checked="true"] { translate: 0 5px; box-shadow: 0 0 0 transparent, inset 0 0 0 3px var(--ink), inset 0 0 0 5px #fff; }
.photo { display: flex; flex-wrap: wrap; gap: 12px; }
.photo input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; }
.icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 16px 10px; }
.iconpick { position: relative; display: grid; justify-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; cursor: pointer; font-weight: 800; font-size: 13px; text-align: center; -webkit-tap-highlight-color: transparent; }
.iconpick__new { position: absolute; top: -6px; right: 0; padding: 2px 6px; border-radius: 999px; background: var(--sk-ink, #16191B); color: #FFD43B; font-size: 10px; letter-spacing: .04em; line-height: 1.3; }
.iconpick img { display: block; width: 64px; height: 64px; border-radius: 22.4%; box-shadow: 0 6px 0 rgba(0, 0, 0, .25); transition: translate .1s, box-shadow .1s; }
.iconpick:active img { translate: 0 6px; box-shadow: 0 0 0 transparent; }
.iconpick input:checked ~ picture img { translate: 0 6px; box-shadow: 0 0 0 3px var(--sk-paper), 0 0 0 6px var(--sk-ink); }
.iconpick input:focus-visible ~ picture img { outline: 3px solid var(--focus); outline-offset: 8px; }
.sounds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
.soundkey { justify-content: flex-start; min-width: 0; min-height: 52px; padding: 10px 12px; font-size: 14px; text-align: left; overflow-wrap: anywhere; }
.soundkey > span:last-child { min-width: 0; }
.soundkey[aria-pressed="true"] { --face: var(--lit); --edge-c: var(--lit-edge); translate: 0 var(--d); box-shadow: 0 0 0 var(--edge-c); }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 14px; height: 14px; flex: none; }
.eq i { width: 3px; height: 30%; border-radius: 2px; background: currentColor; opacity: .5; }
.soundkey[aria-pressed="true"] .eq i { opacity: 1; animation: eq .9s ease-in-out infinite; }
.soundkey[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: -.3s; }
.soundkey[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* page-wide skin ("wear it on the whole page") — hero keys follow the skin */
html[data-skin="casual"] .hk, html[data-skin="buddies"] .hk { --r: clamp(18px, 3.6vw, 42px); --face: color-mix(in srgb, var(--c) 22%, #fff); }
html[data-skin="serious"] .hk { --d: 0px; --r: clamp(6px, 1vw, 10px); --face: #fff; box-shadow: inset 0 0 0 1.5px #D9DDE3, inset 6px 0 0 var(--c); }
html[data-skin="luxe"] .hk { --d: 0px; --face: #1B1C1F; color: #C9A45C; font-family: "New York", Georgia, serif; box-shadow: inset 0 0 0 1px #3A3730, inset 0 0 0 6px #1B1C1F, inset 0 0 0 7px rgba(201, 164, 92, .5); }
html[data-skin="luxe"] .hk__glyph { font-weight: 500; }
html[data-skin="digital"] .hk { --d: 0px; --r: 6px; --face: #0A1811; color: #39FF88; font-family: var(--mono); box-shadow: inset 0 0 0 1.5px rgba(57, 255, 136, .5), 0 0 24px rgba(57, 255, 136, .2); }
html[data-skin="digital"] .hk__glyph { font-weight: 600; text-shadow: 0 0 12px rgba(57, 255, 136, .8); }
html[data-skin="digital"] .hk__fill { background: repeating-linear-gradient(90deg, rgba(57, 255, 136, .32) 0 calc(12.5% - 4px), transparent calc(12.5% - 4px) 12.5%); opacity: 1; }
html[data-skin="cartoon"] .hk { --d: 0px; --face: #fff; box-shadow: 6px 7px 0 var(--ink), inset 0 0 0 3.5px var(--ink); }
html[data-skin="cartoon"] .hk:active, html[data-skin="cartoon"] .hk.is-down { translate: 5px 6px; box-shadow: 1px 1px 0 var(--ink), inset 0 0 0 3.5px var(--ink); }
html[data-skin="neon"] .hk { --d: 0px; --face: #161039; color: #F4F2FF; box-shadow: inset 0 0 0 2px var(--c), 0 0 18px color-mix(in srgb, var(--c) 70%, transparent), 0 0 40px color-mix(in srgb, var(--c) 35%, transparent); }
html[data-skin="block"] .hk { --d: 0px; --r: 0px; --face: #fff; box-shadow: inset 0 0 0 3px var(--ink); }
html[data-skin="block"] .hk.is-done { --face: var(--ink); color: #fff; }
html[data-skin="block"] .hk__fill { background: var(--ink); opacity: .16; }
html[data-skin="block"] .hk.is-done .hk__ok { background-color: #fff; filter: invert(1); }
html[data-skin="luxe"] .hk.is-done, html[data-skin="digital"] .hk.is-done, html[data-skin="neon"] .hk.is-done { color: var(--ink); }

/* ======================= 21:00 YOUR DATA ======================= */
.s--data { background: var(--graphite); color: #EEF1EF; --focus: var(--lit); }
.s--data .s__time { color: #fff; opacity: .05; }
.sockets { list-style: none; margin: 40px 0 46px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 18px; }
@media (min-width: 900px) { .sockets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; } }
.socket { position: relative; display: grid; justify-items: center; padding-top: 44px; }
.socket__hole {
  position: relative; display: block; width: min(100%, 156px); aspect-ratio: 1; border-radius: 20px;
  background: #0E1113;
  box-shadow: inset 0 8px 16px rgba(0, 0, 0, .85), inset 0 -2px 0 rgba(255, 255, 255, .05), 0 1px 0 rgba(255, 255, 255, .07);
}
.socket__hole::before, .socket__hole::after {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 3px;
  background: #D9483A; box-shadow: 0 3px 0 #8A2519;
}
.socket__hole::before { width: 30%; height: 9%; }
.socket__hole::after { width: 9%; height: 30%; }
.socket__hole i { position: absolute; left: 50%; top: 50%; width: 48%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .08); }
.socket__cap {
  --face: var(--cream); --edge-c: var(--cream-edge); --d: 9px; --r: 18px;
  position: absolute; z-index: 2; top: 0; left: 50%;
  display: grid; place-items: center; width: min(62%, 112px); aspect-ratio: 1; padding: 8px;
  translate: -12% -30%; rotate: -13deg;
  color: var(--ink); text-align: center; line-height: 1.1;
  font-family: var(--display); font-weight: 900; font-size: clamp(15px, 4vw, 20px);
  box-shadow: 0 var(--d) 0 var(--edge-c), 0 30px 30px -14px rgba(0, 0, 0, .8), inset 0 2px 0 #fff;
  animation: lift 5s ease-in-out infinite;
  cursor: default;
}
.socket:nth-child(2) .socket__cap { rotate: 9deg; translate: -86% -24%; animation-delay: -1.2s; }
.socket:nth-child(3) .socket__cap { rotate: -6deg; translate: -20% -34%; animation-delay: -2.4s; }
.socket:nth-child(4) .socket__cap { rotate: 14deg; translate: -82% -26%; animation-delay: -3.6s; }
.socket__cap s { text-decoration: line-through; text-decoration-thickness: .16em; text-decoration-color: var(--red); overflow-wrap: anywhere; }
@keyframes lift { 50% { margin-top: -10px; } }
.datagrid { display: grid; gap: 18px; }
@media (min-width: 900px) { .datagrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sync, .files { padding: 22px 20px 24px; border-radius: 26px; background: #252B2F; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08); min-width: 0; }
.sync h3, .files h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.2; }
.sync p, .files p { margin: 0; color: #C2C9C5; font-size: 15.5px; }
.sync__map { display: grid; grid-template-columns: auto minmax(12px, 1fr) auto minmax(12px, 1fr) auto; align-items: center; gap: 8px; margin: 4px 0 24px; }
.node { display: grid; justify-items: center; gap: 8px; min-width: 0; text-align: center; font-size: 12.5px; line-height: 1.2; }
.node svg { height: 48px; width: auto; color: #EEF1EF; }
.node--folder svg { color: var(--k2); height: 44px; }
.node b { max-width: 8.5em; font-weight: 700; }
.wire { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; margin-bottom: 26px; }
.wire i { position: absolute; top: 0; bottom: 0; width: 34%; border-radius: 2px; background: var(--lit); animation: flow 1.7s linear infinite; }
.wire--r i { animation-direction: reverse; }
@keyframes flow { from { left: -34%; } to { left: 100%; } }
.files__stack { display: grid; gap: 12px; margin: 0 0 20px; }
.file { margin: 0; border-radius: 16px; overflow: hidden; background: #0F1214; box-shadow: 0 5px 0 #06080A; }
.file figcaption { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #1A1F22; color: #C9D0CC; font: 700 12px var(--mono); }
.file figcaption::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--k3); box-shadow: -14px 0 0 var(--k1), -28px 0 0 var(--red); margin-left: 28px; }
.file pre { margin: 0; padding: 12px 14px 14px; color: #D6DDD9; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 230px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.j-k { color: #7FC4FF; } .j-s { color: #FFD43B; } .j-n { color: #7ED957; } .m-h { color: #FF8FAB; font-weight: 700; } .m-d { color: #8E9692; }

/* ======================= 22:00 LANGUAGES ======================= */
.s--langs { background: var(--brand-alt); color: var(--ink); padding-bottom: clamp(64px, 9vw, 120px); transition: background-color .5s; }
.langs__tap { margin: 0 0 20px; font-weight: 800; }
.marquee { overflow: hidden; overflow: clip; display: grid; gap: 16px; padding: 6px 0 14px; }
.marquee__track { list-style: none; margin: 0; padding: 0 0 10px; display: flex; gap: 14px; width: max-content; animation: mq 70s linear infinite; }
.marquee__track--rev { animation-direction: reverse; animation-duration: 84s; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.lk {
  display: inline-flex; align-items: center; height: clamp(58px, 9vw, 100px); padding: 0 clamp(18px, 2.6vw, 32px);
  border-radius: clamp(16px, 2vw, 26px);
  background: var(--key); color: var(--ink); text-decoration: none; white-space: nowrap;
  font-family: var(--display); font-weight: 800; font-size: clamp(24px, 4.4vw, 52px); letter-spacing: -.02em;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--brand-alt) 50%, #000), 0 18px 30px -16px rgba(0, 0, 0, .45);
  transition: translate .08s, box-shadow .08s, background-color .2s;
}
.lk:active { translate: 0 6px; box-shadow: 0 0 0 transparent; }
.lk[aria-current="true"] { background: var(--ink); color: #fff; box-shadow: 0 6px 0 #000; }
.lk[aria-current="true"]::after { content: "✓"; margin-left: .35em; color: var(--lit); }

/* ======================= 23:00 NO SUBSCRIPTION ======================= */
.s--nosub { background: var(--ink); color: #fff; padding: 0; --focus: var(--lit); }
.s--nosub > .wrap { padding-top: clamp(70px, 10vw, 140px); padding-bottom: clamp(70px, 10vw, 140px); }
.s--nosub .s__time { top: .5em; color: #fff; opacity: .05; }
.tape {
  position: relative; z-index: 2; width: 112%; height: 32px; margin-left: -6%;
  background: repeating-linear-gradient(-45deg, var(--lit) 0 22px, var(--ink) 22px 44px);
  rotate: -1.6deg; translate: 0 14px;
  box-shadow: 0 0 0 4px var(--ink);
}
.tape--b { rotate: 1.2deg; translate: 0 -14px; }
.mega {
  margin: 0 0 34px; color: var(--lit);
  font-family: var(--display); font-weight: 900; line-height: .86; letter-spacing: -.05em; text-transform: uppercase;
}
.mega .ln { font-size: clamp(48px, 16vw, 240px); }
.mega .ln__i { white-space: nowrap; max-width: none; }
.mega .ln:first-child { color: var(--brand); }
.typer { display: flex; align-items: center; gap: 16px; margin: 0 0 34px; }
.delkey { --face: #2A3034; --edge-c: #050607; --r: 16px; --d: 6px; flex: none; display: grid; place-items: center; width: 78px; height: 64px; padding: 0; color: #fff; font-size: 28px; line-height: 1; box-shadow: 0 var(--d) 0 var(--edge-c), inset 0 1px 0 rgba(255, 255, 255, .14); }
.typer__line { margin: 0; min-height: 1.15em; font-family: var(--display); font-weight: 800; font-size: clamp(26px, 5vw, 58px); line-height: 1.15; letter-spacing: -.02em; }
.typer__line { min-width: 0; overflow-wrap: anywhere; }
.typer__txt { color: var(--lit); }
.typer__caret { display: inline-block; width: .45em; height: .9em; margin-left: .06em; vertical-align: -.1em; background: var(--lit); animation: blink 1.05s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.plans { display: grid; gap: 24px; margin: 44px 0 28px; }
@media (min-width: 860px) { .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: stretch; } }
.plan { position: relative; padding: 26px 22px 30px; border-radius: 30px; background: var(--key); color: var(--ink); box-shadow: 0 9px 0 var(--edge), 0 34px 50px -26px rgba(0, 0, 0, .8); }
.plan--pro { background: var(--lit); box-shadow: 0 9px 0 var(--lit-edge), 0 34px 70px -26px rgba(255, 212, 59, .4); }
.plan__name { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(30px, 4vw, 46px); line-height: 1; letter-spacing: -.02em; }
.plan__price { margin: 14px 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 6.4vw, 74px); line-height: 1; letter-spacing: -.03em; overflow-wrap: anywhere; }
.plan__tag { margin: 12px 0 20px; font: 700 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .78; }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.plan__list li { position: relative; padding-left: 32px; font-weight: 700; font-size: 16px; line-height: 1.4; }
.plan__list li::before {
  content: ""; position: absolute; left: 0; top: .1em; width: 21px; height: 21px; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.plans__restore { margin: 0; font-size: 15px; color: #C9CFCC; }
.plans__restore a { color: var(--lit); font-weight: 700; }

/* ======================= 24:00 END ======================= */
.s--end {
  background-color: var(--night); color: #F3F5F3; --focus: var(--lit);
  background-image:
    radial-gradient(1.4px 1.4px at 22px 34px, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1px 1px at 120px 90px, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.6px 1.6px at 190px 20px, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1px 1px at 70px 160px, rgba(255, 255, 255, .45), transparent);
  background-size: 230px 200px;
}
.s--end .s__time { color: #fff; opacity: .06; }
.s--end .soon { background: #fff; color: var(--ink); box-shadow: 0 5px 0 #8E9692; }
.s--end .soon svg { color: var(--brand); }
.end__grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 980px) { .end__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.end__icon { justify-self: center; width: min(64vw, 380px); margin: 0; rotate: 7deg; }
.end__icon img { display: block; width: 100%; height: auto; border-radius: 22.4%; box-shadow: 0 16px 0 #000, 0 50px 90px -30px color-mix(in srgb, var(--brand) 70%, transparent); animation: bob 6s ease-in-out infinite; }
.end__done { display: flex; align-items: center; gap: 14px; margin: 34px 0 0; font-weight: 700; color: #C9CFCC; }
.end__tok { width: 46px; height: 46px; flex: none; }
.end__tok svg { display: block; width: 100%; height: 100%; }

/* confetti */
.confetti { position: fixed; z-index: 80; left: 0; top: 0; width: 9px; height: 13px; border-radius: 3px; pointer-events: none; animation: conf 1.15s cubic-bezier(.15, .7, .35, 1) forwards; }
@keyframes conf {
  from { transform: translate(var(--x0), var(--y0)) rotate(0); opacity: 1; }
  to { transform: translate(var(--x1), var(--y1)) rotate(var(--rot)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; padding: 0 var(--gut) 10px; }
  .marquee__track .dup { display: none; }
  .confetti { display: none; }
}