:root {
        --ink: #3b2a2d;
        --panel: #fffdf9;
        color-scheme: light;
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-padding-top: env(safe-area-inset-top, 0px);
        scrollbar-color: var(--sbt, #c1676e) var(--sbk, #f8dde0);
        scrollbar-width: thin;
      }
      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      ::-webkit-scrollbar-track {
        background: var(--sbk, #f8dde0);
        border-left: 2px solid var(--sbt, #c1676e);
      }
      ::-webkit-scrollbar-thumb {
        background: var(--sbb, #e89aa5);
        border: 2px solid var(--sbt, #c1676e);
        border-radius: 0;
        box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.12);
      }
      ::-webkit-scrollbar-thumb:hover {
        background: var(--sbt, #c1676e);
      }
      ::-webkit-scrollbar-corner {
        background: var(--sbk, #f8dde0);
      }
      body {
        margin: 0;
        padding: max(18px, env(safe-area-inset-top, 0px)) 12px
          max(36px, env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        background-color: #fafaf7;
        color: var(--ink);
        font-family: 'Pixelify Sans', ui-monospace, Menlo, monospace;
        font-size: 16px;
        line-height: 1.4;
        --acc: #c1676e;
        --rose: #c1676e;
        --pink: #e89aa5;
        --sky: #cde7ea;
        --mint: #9cc3b9;
        --butter: #f5e18f;
        --soft: #f8dde0;
        --bg: #fafaf7;
        --onr: #fffdf9;
      }
      button {
        font: inherit;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
      }
      .tw {
        order: -1;
        width: 100%;
        max-width: 420px;
        margin: 0 auto 14px;
        display: grid;
        gap: 8px;
        justify-items: end;
      }
      .tema {
        width: 100%;
        background: var(--panel);
        border: 3px solid var(--acc);
        border-radius: 12px;
        padding: 10px;
        display: grid;
        gap: 10px;
        box-shadow: 3px 3px 0 var(--acc);
      }
      .tema[hidden] {
        display: none;
      }
      .bgs {
        display: flex;
        gap: 8px;
        align-items: center;
        font-size: 12px;
        font-weight: 600;
      }
      .bgs > span {
        min-width: 62px;
      }
      .sw {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .sw button {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        border: 3px solid var(--acc);
        cursor: pointer;
        padding: 0;
      }
      .sw button.on {
        outline: 3px solid var(--ink);
        outline-offset: 1px;
      }
      .gb {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        background: var(--gb);
        border: 4px solid var(--edge);
        border-radius: 30px;
        padding: 14px 16px 18px;
        box-shadow:
          0 6px 0 var(--edge),
          0 0 0 4px var(--panel);
      }
      .spk {
        width: 96px;
        height: 10px;
        background: var(--gb2);
        border-radius: 6px;
        margin: 0 auto 12px;
      }
      .bezel {
        background: var(--ink);
        border: 3px solid #241719;
        border-radius: 18px;
        padding: 12px;
      }
      .screen {
        background-color: var(--sc);
        background-image: var(--si);
        background-size: var(--ss);
        border: 3px solid var(--panel);
        border-radius: 8px;
        min-height: 480px;
        height: clamp(480px, calc(100vh - 280px), 680px);
        height: clamp(480px, calc(100svh - 280px), 680px);
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .top {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
      }
      .ttl {
        align-self: center;
        text-align: center;
        background: var(--panel);
        border: 3px solid var(--pink);
        border-radius: 22px;
        padding: 4px 22px 6px;
        box-shadow: 0 0 0 3px var(--soft);
      }
      .ttl small {
        display: block;
        font-size: 12px;
        letter-spacing: 2px;
        color: var(--key);
      }
      .ttl h1 {
        margin: 0;
        font-size: 32px;
        line-height: 1.05;
        color: var(--acc);
        letter-spacing: 1px;
      }
      .vw {
        position: relative;
        flex: 1;
        min-height: 0;
        display: flex;
      }
      #view {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
        padding-bottom: 4px;
      }
      #view > * {
        flex: none;
      }
      #view::-webkit-scrollbar {
        display: none;
      }
      .fade {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 36px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-size: 11px;
        color: var(--key);
        background: linear-gradient(to bottom, transparent, var(--sc));
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s;
      }
      .fade.on {
        opacity: 1;
      }
      .coins {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
      }
      .c {
        background: rgba(255, 253, 249, 0.72);
        border: 3px solid transparent;
        border-radius: 10px;
        padding: 6px 0 4px;
        cursor: pointer;
        display: grid;
        justify-items: center;
        gap: 3px;
      }
      .c.cur {
        border: 3px dashed var(--acc);
      }
      .c.on {
        background: var(--pink);
        border-style: solid;
        border-color: var(--acc);
      }
      .coin {
        --px: polygon(
          30% 0,
          70% 0,
          70% 10%,
          90% 10%,
          90% 20%,
          100% 20%,
          100% 80%,
          90% 80%,
          90% 90%,
          70% 90%,
          70% 100%,
          30% 100%,
          30% 90%,
          10% 90%,
          10% 80%,
          0 80%,
          0 20%,
          10% 20%,
          10% 10%,
          30% 10%
        );
        width: 54px;
        height: 54px;
        background: var(--acc);
        clip-path: var(--px);
        position: relative;
        display: grid;
        place-items: center;
        align-content: center;
        line-height: 1;
      }
      .coin:before {
        content: '';
        position: absolute;
        inset: 5px;
        background: var(--butter);
        clip-path: var(--px);
        box-shadow: inset -5px -5px 0
          color-mix(in srgb, var(--acc) 30%, transparent);
      }
      .coin:after {
        content: '';
        position: absolute;
        left: 12px;
        top: 11px;
        width: 5px;
        height: 5px;
        background: #fffdf9;
        opacity: 0.9;
      }
      .coin small,
      .coin b {
        position: relative;
        z-index: 1;
      }
      .coin small {
        font-size: 8px;
        font-weight: 700;
      }
      .coin b,
      .p,
      .sum b,
      .meter span,
      .top {
        font-family: Silkscreen, 'Pixelify Sans', ui-monospace, monospace;
      }
      .coin b {
        font-size: 13px;
        font-weight: 700;
      }
      .p {
        font-size: 12px;
        letter-spacing: -0.5px;
        white-space: nowrap;
      }
      .p small {
        font-size: 8px;
      }
      .cust {
        background: var(--panel);
        border: 3px solid var(--gb);
        border-radius: 12px;
        padding: 10px;
        display: grid;
        gap: 8px;
        transition: border-color 0.25s;
      }
      .cust .btn {
        background: var(--key);
        color: var(--kc);
        border-radius: 10px;
        transition:
          transform 0.1s,
          filter 0.15s;
      }
      .cust .p {
        align-self: start;
        background: color-mix(in srgb, var(--gb) 28%, #fff);
        padding: 3px 10px;
        border-radius: 6px;
        font-size: 11px;
      }
      .cust-note {
        margin-top: -6px;
        font-size: 10px;
        opacity: 0.75;
      }
      .cust .row {
        display: flex;
        gap: 8px;
      }
      input[type='number'] {
        -moz-appearance: textfield;
        appearance: textfield;
      }
      input[type='number']::-webkit-inner-spin-button,
      input[type='number']::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      .nw {
        --bc: var(--key);
        display: flex;
        flex: 1;
        min-width: 0;
        border: 3px solid var(--bc);
        border-radius: 10px;
        overflow: hidden;
        background: var(--bg);
        transition:
          box-shadow 0.2s,
          border-color 0.2s;
      }
      .nw:focus-within {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--gb) 55%, transparent);
      }
      .nw input[type='number'] {
        border: 0;
        border-radius: 0;
        min-width: 0;
        padding: 10px 12px;
        letter-spacing: 0.5px;
        background: transparent;
      }
      .nw input[type='number']:focus {
        border: 0;
      }
      .nw input::placeholder {
        color: color-mix(in srgb, var(--ink) 38%, transparent);
      }
      .stp {
        display: grid;
        grid-template-rows: 1fr 1fr;
        width: 38px;
        flex: none;
      }
      .stp button {
        border: 0;
        border-left: 3px solid var(--bc);
        background: var(--gb);
        color: var(--key);
        font-size: 11px;
        line-height: 1;
        padding: 0;
        cursor: pointer;
        transition:
          background 0.15s,
          color 0.15s;
      }
      .stp button + button {
        border-top: 3px solid var(--bc);
      }
      @media (hover: hover) {
        .stp button:hover {
          background: var(--gb2);
        }
      }
      .stp button:active {
        background: var(--key);
        color: var(--kc);
      }
      .box {
        background: var(--panel);
        border: 3px solid var(--acc);
        border-radius: 10px;
        padding: 10px;
        display: grid;
        gap: 10px;
      }
      .box h2 {
        margin: 0;
        font-size: 20px;
        color: var(--acc);
      }
      .box ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 8px;
        font-size: 15px;
      }
      .box li:before {
        content: '✿ ';
        color: var(--acc);
      }
      .sum {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--soft);
        border: 3px dashed var(--pink);
        border-radius: 8px;
        padding: 6px 10px;
      }
      .sum b {
        font-size: 15px;
        color: var(--acc);
      }
      label {
        display: grid;
        gap: 4px;
        font-weight: 600;
      }
      input[type='text'],
      input[type='number'] {
        font: inherit;
        font-family: Silkscreen, 'Pixelify Sans', ui-monospace, monospace;
        font-size: 13px;
        width: 100%;
        padding: 9px 10px;
        border: 3px solid var(--mint);
        border-radius: 8px;
        background: var(--bg);
        color: var(--ink);
      }
      input:focus {
        outline: none;
        border-color: var(--acc);
      }
      .chk {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        font-weight: 400;
        font-size: 14px;
      }
      .chk input {
        width: 22px;
        height: 22px;
        flex: none;
        accent-color: var(--acc);
      }
      .btn {
        font-weight: 700;
        font-size: 18px;
        background: var(--acc);
        color: #fffdf9;
        border: 3px solid var(--ink);
        border-radius: 8px;
        padding: 9px;
        cursor: pointer;
        box-shadow: 3px 3px 0 var(--ink);
      }
      .btn.sm {
        font-size: 15px;
        padding: 6px 14px;
        box-shadow: 2px 2px 0 var(--ink);
      }
      .btn:disabled {
        opacity: 0.45;
      }
      .btn:not(:disabled):active {
        transform: translate(2px, 2px);
        box-shadow: 1px 1px 0 var(--ink);
      }
      .meter {
        background: var(--panel);
        border: 3px solid var(--panel);
        outline: 3px solid var(--gb2);
        border-radius: 10px;
        position: relative;
        height: 34px;
        overflow: hidden;
        margin: 2px 3px;
      }
      .meter i {
        position: absolute;
        inset: 0 auto 0 0;
        background: color-mix(in srgb, var(--mint) 60%, #fff);
        width: 0;
        transition: width 0.25s;
      }
      .meter span {
        position: relative;
        display: block;
        text-align: center;
        line-height: 28px;
        font-size: 10px;
        letter-spacing: 1px;
      }
      .ctl {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
      }
      .dpad {
        display: grid;
        grid-template-columns: repeat(3, 44px);
        grid-template-rows: repeat(3, 44px);
      }
      .dpad button,
      .dpad div,
      .ab button {
        background: var(--key);
        border: 0;
        color: var(--kc);
        font-size: 16px;
        padding: 0;
      }
      .dpad button {
        cursor: pointer;
      }
      .dpad button:active,
      .ab button:active,
      .pill:active {
        filter: brightness(0.85);
      }
      .u {
        grid-area: 1/2;
        border-radius: 8px 8px 0 0;
      }
      .l {
        grid-area: 2/1;
        border-radius: 8px 0 0 8px;
      }
      .r {
        grid-area: 2/3;
        border-radius: 0 8px 8px 0;
      }
      .d {
        grid-area: 3/2;
        border-radius: 0 0 8px 8px;
      }
      .m {
        grid-area: 2/2;
      }
      .ab {
        display: grid;
        grid-template-columns: repeat(3, 40px);
        grid-template-rows: repeat(3, 40px);
        gap: 2px;
      }
      .ab button {
        border-radius: 50%;
        cursor: pointer;
        font-weight: 700;
        background: var(--gb2);
        border: 3px solid var(--key);
        color: var(--ink);
      }
      .ab .t {
        grid-area: 1/2;
      }
      .ab .bl {
        grid-area: 2/1;
      }
      .ab .br {
        grid-area: 2/3;
      }
      .ab .bt {
        grid-area: 3/2;
      }
      .ss {
        display: flex;
        gap: 12px;
        align-self: flex-end;
        margin-bottom: 6px;
      }
      .ss div {
        display: grid;
        justify-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
      }
      .pill {
        width: 46px;
        height: 14px;
        border-radius: 8px;
        background: var(--key);
        border: 3px solid var(--gb2);
        cursor: pointer;
      }
      .soc {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 32px;
      }
      .soc a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: Silkscreen, 'Pixelify Sans', monospace;
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;
        color: var(--ink);
        background: var(--panel);
        border: 3px solid var(--ink);
        border-radius: 8px;
        padding: 7px 12px;
        box-shadow: 2px 2px 0 var(--ink);
      }
      .soc a:active {
        transform: translate(2px, 2px);
        box-shadow: 0 0 0 var(--ink);
      }
      .msg {
        margin: 0;
        background: var(--soft);
        border: 3px dashed var(--pink);
        border-radius: 8px;
        padding: 8px 10px;
        font: inherit;
        font-size: 13px;
        white-space: pre-wrap;
        word-break: break-word;
      }
      .ty {
        margin: 0;
        font-size: 15px;
      }
      .btn.alt {
        background: var(--panel);
        color: var(--ink);
      }
      .tbar {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        width: 100%;
      }
      #mu {
        display: grid;
        place-items: center;
        padding: 6px 12px;
      }
      #mu .x {
        display: none;
      }
      #mu.off .x {
        display: inline;
      }
      .ft {
        text-align: center;
        font-size: 12px;
        margin-top: 12px;
        color: var(--gt);
        font-weight: 600;
      }
      @media (max-width: 420px) {
        body {
          padding-right: max(10px, env(safe-area-inset-right, 0px));
          padding-left: max(10px, env(safe-area-inset-left, 0px));
        }
        .gb {
          padding: 12px 12px 16px;
          border-radius: 26px;
        }
        .bezel {
          padding: 9px;
          border-radius: 16px;
        }
        .screen {
          min-height: 390px;
          height: clamp(390px, 64svh, 560px);
          padding: 8px;
          gap: 7px;
        }
        .top {
          font-size: clamp(8px, 2.5vw, 10px);
        }
        .ttl {
          max-width: 100%;
          padding: 4px 14px 6px;
        }
        .ttl h1 {
          font-size: clamp(25px, 8vw, 32px);
        }
        .coins {
          gap: 4px;
        }
        .c {
          min-width: 0;
          padding: 5px 1px 4px;
        }
        .coin {
          width: clamp(42px, 14vw, 54px);
          height: clamp(42px, 14vw, 54px);
        }
        .coin b {
          font-size: clamp(11px, 3.4vw, 13px);
        }
        .p {
          font-size: clamp(9px, 3vw, 12px);
          letter-spacing: -0.7px;
        }
        .p small {
          font-size: 7px;
        }
        .cust {
          padding: 8px;
        }
        .cust .row {
          gap: 6px;
        }
        .cust .btn.sm {
          padding-right: 10px;
          padding-left: 10px;
        }
        .ctl {
          display: grid;
          grid-template-columns: 1fr 1fr;
          justify-items: center;
          row-gap: 8px;
          margin-top: 18px;
        }
        .dpad {
          grid-column: 1;
          grid-row: 1;
          grid-template-columns: repeat(3, clamp(32px, 11vw, 44px));
          grid-template-rows: repeat(3, clamp(32px, 11vw, 44px));
        }
        .ab {
          grid-column: 2;
          grid-row: 1;
          grid-template-columns: repeat(3, clamp(29px, 10vw, 40px));
          grid-template-rows: repeat(3, clamp(29px, 10vw, 40px));
          gap: 1px;
        }
        .ss {
          grid-column: 1 / -1;
          grid-row: 2;
          justify-self: center;
          gap: clamp(5px, 2vw, 12px);
          margin-bottom: 0;
        }
        .pill {
          width: clamp(34px, 11vw, 46px);
        }
        .soc {
          gap: 8px;
          margin-top: 24px;
        }
        .soc a {
          font-size: clamp(9px, 2.8vw, 11px);
          padding: 7px 9px;
        }
      }
      @media (max-width: 360px) {
        .dpad {
          grid-template-columns: repeat(3, clamp(30px, 10.5vw, 38px));
          grid-template-rows: repeat(3, clamp(30px, 10.5vw, 38px));
        }
        .ab {
          grid-template-columns: repeat(3, clamp(27px, 9.5vw, 34px));
          grid-template-rows: repeat(3, clamp(27px, 9.5vw, 34px));
        }
      }
      @media (max-width: 320px) {
        body {
          padding-right: max(6px, env(safe-area-inset-right, 0px));
          padding-left: max(6px, env(safe-area-inset-left, 0px));
        }
        .gb {
          padding-right: 8px;
          padding-left: 8px;
        }
        .bezel {
          padding: 7px;
        }
        .screen {
          padding: 7px;
        }
        .ttl {
          padding-right: 8px;
          padding-left: 8px;
        }
        .soc a {
          padding-right: 7px;
          padding-left: 7px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
        }
      }