/* SPARC: one soft pink room, one cream appliance. */

:root {
  --pink: #FBD9E3;
  --pink-deep: #F4BED1;
  --cream: #FFF6E9;
  --cream-2: #FFFBF3;
  --ink: #241C22;
  --ink-60: rgba(36, 28, 34, .62);
  --ink-40: rgba(36, 28, 34, .40);
  --ink-14: rgba(36, 28, 34, .14);
  --yellow: #FBD85F;
  --yellow-deep: #EFB637;
  --lav: #B79BEE;
  --lav-deep: #8E6FDA;
  --peach: #F2A98C;
  --peach-deep: #DE8461;
  --green: #4FAE7E;

  --r-lg: 34px;
  --r-md: 20px;
  --r-sm: 13px;

  --lift: 0 24px 48px -16px rgb(36 28 34 / 18%),
          0 7px 12px -6px rgb(36 28 34 / 12%),
          inset 0 2px 0 rgb(255 255 255 / 65%);
  --lift-sm: 0 8px 16px -8px rgb(36 28 34 / 22%),
             0 2px 4px -2px rgb(36 28 34 / 14%);

  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  padding:
    calc(env(safe-area-inset-top, 0px) + 28px) 20px
    calc(env(safe-area-inset-bottom, 0px) + 28px);
  background: var(--pink);
  color: var(--ink);
  font: 400 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  overflow-x: hidden;
}

/* ---- the room ---------------------------------------------------------- */
/*
   Not a flat fill. Four layers, all of them soft and none of them with an edge you could point
   at: a warm key light in the upper left (the same direction as the clay renders), two colour
   blooms, a full-height depth gradient that never seams because it spans the whole screen, and a
   floor glow that stops the objects from floating.
*/

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1100px 820px at 16% 6%, rgba(255, 249, 232, .80), transparent 58%),
    radial-gradient(820px 680px at 90% 84%, rgba(183, 155, 238, .34), transparent 62%),
    radial-gradient(760px 600px at 82% 4%, rgba(242, 169, 140, .26), transparent 60%),
    radial-gradient(150% 46% at 50% 106%, rgba(200, 122, 150, .40), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(36, 28, 34, .055) 100%),
    var(--pink);
}

/* A fine plaster grain, so the ground reads as a surface rather than a fill. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjkiIG51bU9jdGF2ZXM9IjMiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+");
  background-size: 200px 200px;
}

/* The appliance is plugged in: one cable passes behind it and ends in a plug on the floor, one
   pin short of the socket. The grid is not switched on yet, and the room says so. */
.room { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.room__outlet,
.room__inlet {
  position: absolute;
  bottom: 0;
  width: 260px;
  height: 240px;
}
.room__outlet { left: 0; }
.room__inlet { right: 0; transform: scaleX(-1); }

.room svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Mirrored so the plug's pull ring faces the cable and its pins face the socket. The ring sits at
   0.816 of the mirrored image's width and 0.425 of its height, which is where the cable ends. */
.room__plug {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 200px;
  transform: scaleX(-1);
  filter: drop-shadow(0 12px 16px rgba(36, 28, 34, .18));
}

/* A contact shadow, so the plug sits on the floor instead of hovering over it. */
.room__outlet::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 28px;
  width: 172px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(36, 28, 34, .24), transparent 74%);
}

@media (max-width: 1280px) {
  .room { display: none; }
}

/* ---- the appliance ----------------------------------------------------- */

.device {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  background: linear-gradient(180deg, var(--cream-2), var(--cream));
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 56px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

.device__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 2px solid var(--ink-14);
  background: rgba(255, 255, 255, .45);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand__bolt { width: 40px; height: 40px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong {
  font: 900 22px/1 Nunito, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .02em;
}
.brand__text span { font-size: 12.5px; color: var(--ink-60); }

.lamp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--pink);
  border: 2px solid var(--ink-14);
  border-radius: 999px;
  padding: 6px 14px 6px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-60);
}
.lamp__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--yellow);
  border: 2px solid var(--ink);
  animation: blink 2.4s ease-in-out infinite;
}
.lamp.is-live .lamp__dot { background: var(--green); }
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

.device__body {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  min-height: 0;
  flex: 1;
}

/* ---- the buttons ------------------------------------------------------- */

.rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 14px;
  border-right: 2px solid var(--ink-14);
  background: rgba(244, 190, 209, .28);
  overflow-y: auto;
}

.key {
  appearance: none;
  font: 800 14.5px/1.25 Nunito, ui-sans-serif, system-ui, sans-serif;
  text-align: left;
  color: var(--ink);
  background: var(--cream-2);
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  box-shadow: 0 4px 0 var(--ink);
  padding: 11px 13px;
  min-height: 52px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: transform .17s ease, box-shadow .17s ease, background .17s ease;
}
.key small {
  font: 500 11.5px/1.3 Inter, sans-serif;
  color: var(--ink-60);
}
.key:hover { background: #fff; }
.key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.key[aria-current="true"] {
  background: var(--yellow);
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}
.key[aria-current="true"] small { color: rgba(36, 28, 34, .72); }
.key[aria-current="true"]::after {
  content: "";
  position: absolute;
}
.key:focus-visible { outline: 3px solid var(--lav-deep); outline-offset: 2px; }

/* ---- the display ------------------------------------------------------- */

.screen { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

.screen__head { padding: 22px 26px 12px; }
.screen__head h1 {
  margin: 0;
  font: 900 30px/1.1 Nunito, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.01em;
}
.screen__head p { margin: 7px 0 0; color: var(--ink-60); max-width: 62ch; font-size: 15px; }

.screen__body {
  padding: 4px 26px 26px;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
}
.screen__body:focus-visible { outline: 3px solid var(--lav-deep); outline-offset: -3px; }

.device__foot {
  border-top: 2px solid var(--ink-14);
  padding: 12px 22px;
  background: rgba(244, 190, 209, .3);
}
.device__foot p { margin: 0; font-size: 12.5px; color: var(--ink-60); }
.device__foot strong { color: var(--ink); }

/* ---- content atoms ----------------------------------------------------- */

.panel {
  background: #fff;
  border: 2px solid var(--ink-14);
  border-radius: var(--r-md);
  padding: 18px;
  margin: 14px 0;
}
.panel > h2 {
  margin: 0 0 4px;
  font: 800 17px/1.25 Nunito, sans-serif;
}
.panel > p { margin: 0 0 12px; color: var(--ink-60); font-size: 14.5px; }
.panel--warn { background: #FFF6E0; border-color: var(--yellow-deep); }
.panel--calm { background: rgba(183, 155, 238, .13); border-color: rgba(142, 111, 218, .38); }

.grid2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.stat {
  background: var(--cream-2);
  border: 2px solid var(--ink-14);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.stat dt {
  font: 600 11.5px/1.3 Inter, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin: 0 0 4px;
}
.stat dd {
  margin: 0;
  font: 700 21px/1.15 Inter, sans-serif;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.stat dd small { font-size: 13px; font-weight: 500; color: var(--ink-60); }
.stat--big dd { font-size: 27px; }
.stat--mint { background: rgba(251, 216, 95, .3); border-color: var(--yellow-deep); }
.stat--burn { background: rgba(242, 169, 140, .28); border-color: var(--peach-deep); }

.row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--ink-14);
  font-size: 14.5px;
}
.row:last-child { border-bottom: 0; }
.row b { font-variant-numeric: tabular-nums; font-weight: 700; }
.row span { color: var(--ink-60); }

.field { margin: 14px 0; }
.field label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 600 13px/1.3 Inter, sans-serif;
  margin-bottom: 7px;
}
.field label b { font-variant-numeric: tabular-nums; font-weight: 700; }
.field input[type="range"] {
  width: 100%;
  appearance: none;
  height: 10px;
  border-radius: 999px;
  background: var(--pink-deep);
  border: 2px solid var(--ink);
  outline-offset: 3px;
}
.field input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--lav);
  border: 2px solid var(--ink);
  box-shadow: 0 3px 0 rgba(36, 28, 34, .5);
  cursor: grab;
  margin-top: -1px;
}
.field input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--lav); border: 2px solid var(--ink); cursor: grab;
}
.field .hint { font-size: 12.5px; color: var(--ink-40); margin-top: 6px; }

.btn {
  appearance: none;
  font: 800 15px/1 Nunito, sans-serif;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  box-shadow: 0 4px 0 var(--ink);
  padding: 14px 20px;
  min-height: 48px;
  cursor: pointer;
  transition: transform .17s ease, box-shadow .17s ease, background .17s ease;
}
.btn:hover { background: #FFE388; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: 0 4px 0 var(--ink-40); }
.btn--ghost { background: var(--cream-2); }
.btn--ghost:hover { background: #fff; }
.btn--cut { background: var(--peach); }
.btn--cut:hover { background: #F7BCA3; }
.btn:focus-visible { outline: 3px solid var(--lav-deep); outline-offset: 2px; }

.btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.tape {
  background: var(--ink);
  color: #FFEFC6;
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font: 500 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  max-height: 168px;
  overflow-y: auto;
  margin-top: 12px;
}
.tape div { white-space: pre-wrap; }
.tape .ok { color: #9FE3BC; }
.tape .no { color: #FFB1A0; }

.meter {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: var(--pink-deep);
  border: 2px solid var(--ink);
  overflow: hidden;
  margin: 10px 0 4px;
}
.meter i {
  display: block;
  height: 100%;
  background: var(--yellow);
  border-right: 2px solid var(--ink);
  transition: width .3s ease;
}
.meter--drain i { background: var(--peach); }

.pill {
  display: inline-block;
  font: 700 11.5px/1 Inter, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--cream-2);
}
.pill--yes { background: var(--yellow); }
.pill--no { background: var(--peach); }

.prop { width: 148px; height: 148px; float: right; margin: -6px -6px 6px 14px; }

.ledger { margin: 0; }
.ledger dt { font: 800 15px/1.35 Nunito, sans-serif; margin-top: 14px; }
.ledger dt:first-child { margin-top: 0; }
.ledger dd { margin: 4px 0 0; color: var(--ink-60); font-size: 14.5px; }
.ledger code {
  font: 500 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--pink);
  padding: 2px 6px;
  border-radius: 6px;
  word-break: break-all;
}

.scroller { overflow-x: auto; }

@media (max-width: 860px) {
  body { padding-left: 14px; padding-right: 14px; }
  .device { max-height: none; }
  .device__body { grid-template-columns: minmax(0, 1fr); }
  .rail {
    flex-direction: row;
    border-right: 0;
    border-bottom: 2px solid var(--ink-14);
    overflow-x: auto;
    padding: 12px;
  }
  .key { min-width: 156px; flex: none; }
  .screen__head { padding: 18px 16px 10px; }
  .screen__head h1 { font-size: 25px; }
  .screen__body { padding: 4px 16px 22px; }
  .prop { float: none; display: block; margin: 0 auto 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- the fee switch ---------------------------------------------------- */

.switch {
  display: flex;
  gap: 0;
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: 0 4px 0 var(--ink);
  width: fit-content;
  max-width: 100%;
}
.switch button {
  appearance: none;
  border: 0;
  border-right: 2px solid var(--ink);
  background: var(--cream-2);
  color: var(--ink-60);
  font: 800 13.5px/1.2 Nunito, sans-serif;
  padding: 11px 15px;
  min-height: 46px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  transition: background .17s ease, color .17s ease;
}
.switch button:last-child { border-right: 0; }
.switch button small { font: 500 11px/1.25 Inter, sans-serif; }
.switch button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }
.switch button[aria-pressed="true"].is-burn { background: var(--peach); }
.switch button:focus-visible { outline: 3px solid var(--lav-deep); outline-offset: -3px; }

/* ---- the hero band, inside the display -------------------------------- */
/*
   The render is 16:10 with its subject on the right, so it is taken out of the flow and laid on
   the floor of the band rather than squeezed into a grid column: nothing gets cropped and the
   copy keeps a comfortable measure.
*/

.hero {
  position: relative;
  background: linear-gradient(118deg, var(--pink) 0%, #FCE5EC 58%, var(--pink) 100%);
  border: 2px solid var(--ink-14);
  border-radius: var(--r-md);
  margin: 14px 0 18px;
  padding: 26px 24px 24px;
  min-height: 238px;
  overflow: hidden;
}
.hero__copy { position: relative; z-index: 1; max-width: 57%; }
.hero h2 {
  margin: 0 0 8px;
  font: 900 clamp(21px, 2.5vw, 29px)/1.12 Nunito, sans-serif;
  letter-spacing: -.015em;
}
.hero p { margin: 0; font-size: 14.5px; color: var(--ink-60); }
.hero .pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.hero img {
  position: absolute;
  right: -14px;
  bottom: -16px;
  width: 50%;
  max-width: 360px;
  height: auto;
  z-index: 0;
}

@media (max-width: 760px) {
  .hero { padding: 20px 18px 0; min-height: 0; }
  .hero__copy { max-width: none; }
  .hero img {
    position: static;
    width: calc(100% + 36px);
    max-width: none;
    margin: 8px -18px -2px;
    display: block;
  }
}