:root {
  --ease-gooey: cubic-bezier(0.22, 0.74, 0.22, 1);
  --ease-soft: cubic-bezier(0.25, 0.62, 0.3, 1);
  --window-shadow-near: 4px;
  --window-shadow-far: 7px;
}

html, body { height: 100%; overflow: hidden; }

.pages-track {
  position: fixed;
  top: var(--mb-h, 80px);
  left: 0; right: 0; bottom: 0;
  overflow: hidden;
}

#pagesInner {
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  transition: transform 0.58s var(--ease-gooey);
  will-change: transform;
}

.page {
  width: 100vw;
  min-width: 100vw;
  height: 100%;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

@supports (scrollbar-gutter: stable) {
  .page { scrollbar-gutter: stable; }
}

.page-inner {
  margin: 0 auto;
  padding: 16px 32px 48px;
}
.page-inner.wide   { max-width: 1100px; }
.page-inner.narrow { max-width: 840px; padding-bottom: 60px; }

#header-zone {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 20px 28px 0;
  background: transparent;
  image-rendering: pixelated;
  overflow: visible;
}
#header-zone::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='116' height='64'%3E%3Ctext x='5' y='54' font-family='sans-serif' font-weight='bold' font-size='48' fill='%2300FFCC' fill-opacity='0.18'%3E%E7%8E%89%E5%85%8E%3C/text%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='116' height='64'%3E%3Ctext x='5' y='54' font-family='sans-serif' font-weight='bold' font-size='48' fill='%23FF44CC' fill-opacity='0.13'%3E%E7%8E%89%E5%85%8E%3C/text%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='116' height='64'%3E%3Ctext x='5' y='54' font-family='sans-serif' font-weight='bold' font-size='48' fill='%23C4B5FD' fill-opacity='0.10'%3E%E7%8E%89%E5%85%8E%3C/text%3E%3C/svg%3E");
  background-size: 116px 64px;
  animation: kanji-breathe 16s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
}

@keyframes kanji-breathe {
  0%   { background-position: -22px -20px, -12px -17px, -28px -14px; filter: hue-rotate(0deg) saturate(1.1) brightness(1); }
  15%  { background-position: -5px -6px, 5px -3px, -11px 0; filter: hue-rotate(40deg) saturate(2.2) brightness(1.1); }
  30%  { background-position: 13px 4px, 23px 7px, 7px 10px; filter: hue-rotate(80deg) saturate(3) brightness(1.18); }
  38%  { background-position: 22px 8px, 32px 11px, 16px 14px; filter: hue-rotate(100deg) saturate(1.4) brightness(1.02); }
  38.25% { background-position: 12px 8px, 32px 11px, 34px 14px; filter: hue-rotate(160deg) saturate(4.5) contrast(1.4) brightness(1.22); }
  38.55% { background-position: 16px 8px, 32px 11px, 28px 14px; filter: hue-rotate(60deg) saturate(3) contrast(1.2) brightness(1.1); }
  38.8% { background-position: 22px 8px, 32px 11px, 16px 14px; filter: hue-rotate(100deg) saturate(1.4) brightness(1.02); }
  50%  { background-position: 36px 12px, 46px 15px, 30px 18px; filter: hue-rotate(130deg) saturate(1.2) brightness(0.97); }
  65%  { background-position: 53px 18px, 63px 21px, 47px 24px; filter: hue-rotate(200deg) saturate(2.6) brightness(1.12); }
  70%  { background-position: 59px 20px, 69px 23px, 53px 26px; filter: hue-rotate(220deg) saturate(1.3) brightness(1); }
  70.25% { background-position: 49px 20px, 69px 23px, 71px 26px; filter: hue-rotate(290deg) saturate(5) contrast(1.5) brightness(1.25); }
  70.55% { background-position: 54px 20px, 69px 23px, 64px 26px; filter: hue-rotate(240deg) saturate(3.2) contrast(1.25) brightness(1.12); }
  70.8% { background-position: 59px 20px, 69px 23px, 53px 26px; filter: hue-rotate(220deg) saturate(1.3) brightness(1); }
  80%  { background-position: 71px 26px, 81px 29px, 65px 32px; filter: hue-rotate(280deg) saturate(3.2) brightness(1.16); }
  100% { background-position: 94px 44px, 104px 47px, 88px 50px; filter: hue-rotate(360deg) saturate(1.1) brightness(1); }
}
.page#page-shop .win:nth-child(even) { margin-left: 12px; }
.page#page-shop .win:nth-child(odd)  { margin-right: 12px; }

.page#page-contact .win {
  margin-left: 0;
  margin-right: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: linear-gradient(
    to bottom,
    #FEFEFE 0%,
    #F9FDFC 14%,
    #EFFAF7 40%,
    #E7F8F4 70%,
    #E1F6F1 100%
  ) fixed;
  font-family: 'VT323', monospace;
  font-size: 16px;

  padding: 0;
  max-width: none;
  margin: 0;
  color: #333;
}

.win {
  background: #FAFAF7;
  margin-bottom: 8px;
  border: 2px solid #A0A09A;
  box-shadow:
    inset 0 0 0 1px #D8D8D2,
    var(--window-shadow-near) var(--window-shadow-near) 0 rgba(112, 118, 114, 0.42),
    var(--window-shadow-far) var(--window-shadow-far) 0 rgba(180, 166, 248, 0.13);
  position: relative;
  z-index: 1;
}

.win-bar {
  height: 24px;
  background: #EEEEE8;
  border-bottom: 2px solid #A0A09A;
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;
}
.win-bar::before, .win-bar::after {
  content: '';
  flex: 1;
  height: 100%;
  background-color: #EEEEE8;
  background-image: repeating-linear-gradient(
    90deg, #A0A09A 1px, transparent 1px 2px
  );
  opacity: 0.6;
}
.win-close {
  position: absolute;
  left: 6px; top: 5px;
  width: 13px; height: 13px;
  border: 1.5px solid #A0A09A;
  background: #EEEEE8;
  z-index: 2;
  cursor: pointer;
}

.win-title {
  font-size: 14px;
  padding: 0 10px;
  white-space: nowrap;
  flex-shrink: 0;
  color: #555;
  line-height: 1;
  background: #EEEEE8;
  z-index: 1;
}
.win-body { padding: 14px 20px; }

.win-mint {
  border-color: #7EC8BE;
  box-shadow:
    inset 0 0 0 1px #B4DED8,
    var(--window-shadow-near) var(--window-shadow-near) 0 rgba(126, 200, 190, 0.72),
    var(--window-shadow-far) var(--window-shadow-far) 0 rgba(180, 166, 248, 0.15);
}
.win-mint .win-bar { border-bottom-color: #7EC8BE; background: #C8E8E2; }
.win-mint .win-bar::before, .win-mint .win-bar::after {
  background-color: #C8E8E2;
  background-image: repeating-linear-gradient(
    90deg, #7EC8BE 1px, transparent 1px 2px
  );
  opacity: 0.7;
}
.win-mint .win-close { border-color: #7EC8BE; background: #C8E8E2; }
.win-mint .win-title { color: #5CB0AA; background: #C8E8E2; }

.win-lil {
  border-color: #B4A6F8;
  box-shadow:
    inset 0 0 0 1px #DED6FF,
    var(--window-shadow-near) var(--window-shadow-near) 0 rgba(180, 166, 248, 0.72),
    var(--window-shadow-far) var(--window-shadow-far) 0 rgba(126, 200, 190, 0.15);
}
.win-lil .win-bar { border-bottom-color: #B4A6F8; background: #E5DEFF; }
.win-lil .win-bar::before, .win-lil .win-bar::after {
  background-color: #E5DEFF;
  background-image: repeating-linear-gradient(
    90deg, #B4A6F8 1px, transparent 1px 2px
  );
  opacity: 0.7;
}
.win-lil .win-close { border-color: #B4A6F8; background: #E5DEFF; }
.win-lil .win-title { color: #AC9EEC; background: #E5DEFF; }

.hero-body { display: flex; gap: 14px; align-items: center; }
.hero-body svg { width: 80px; flex-shrink: 0; }
.hero-right h1 { font-size: 60px; line-height: 0.88; color: #7EC8BE; margin-bottom: 6px; }
.hero-right .tagline { display: block; font-size: 15px; color: #7EC8BE; letter-spacing: 0.14em; margin-bottom: 8px; }
.hero-right p { font-size: 15px; color: #858B87; line-height: 1.6; }

.case-body { display: flex; gap: 14px; align-items: flex-start; }

.swatch {
  width: 203px; height: 100px;
  border: 1px solid #D8D8D2;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #C8C8C2;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.sw-m { background: #D8F0EA; }
.sw-l { background: #EDE5FF; }

.case-status { font-size: 18px; margin-bottom: 3px; }
.case-name { font-size: 58px; line-height: 1; color: #7EC8BE; margin-bottom: 4px; }
.case-name.lil { color: #B4A6F8; }
.case-detail { font-size: 18px; letter-spacing: 0.06em; margin-bottom: 10px; }

.case-expanded {
  --expanded-height: 0px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scaleY(0.985);
  transform-origin: top center;
  transition:
    max-height 0.5s var(--ease-gooey),
    padding 0.4s var(--ease-soft),
    opacity 0.34s var(--ease-soft),
    transform 0.5s var(--ease-gooey);
  margin-top: 0;
  padding-top: 0;
}
.case-expanded.open {
  max-height: var(--expanded-height);
  padding-top: 12px;
  opacity: 1;
  transform: translateY(0) scaleY(1);
}

.gallery-toggle {
  min-width: 10ch;
  transform-origin: center;
}

.mac-btn.is-morphing {
  animation: gallery-toggle-goo 0.5s var(--ease-gooey);
}

@keyframes gallery-toggle-goo {
  0% { transform: scale(1); }
  38% { transform: scaleX(0.92) scaleY(1.1); }
  68% { transform: scaleX(1.04) scaleY(0.97); }
  100% { transform: scale(1); }
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 8px;
}

.photo-thumb {
  aspect-ratio: 4/3;
  border: 1.5px solid #D0D0C8;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #C0C0B8;
  background: #F0EEE8;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  cursor: default;
  font-size: 24px;
}
.photo-thumb:hover { border-color: #7EC8BE; }
.photo-thumb.lil-thumb:hover { border-color: #B4A6F8; }
.photo-thumb img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  display: block;
}
.photo-thumb .ph-sub { font-size: 11px; color: #989E9A; letter-spacing: 0.06em; }
.photo-thumb.image-missing::before {
  content: '◇';
  color: #858B87;
  font-size: 28px;
  line-height: 1;
}
.photo-thumb.image-missing .ph-sub::after {
  content: ' · photo unavailable';
}

.expanded-note {
  font-size: 13px;
  color: #858B87;
  letter-spacing: 0.06em;
}
.case-footer {
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px dashed #E0E0D8;
  border-bottom: 1px dashed #E0E0D8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mac-btn {
  display: inline-block;
  background: #FAFAF7;
  border: 1.5px solid #A0A09A;
  box-shadow: 1px 1px 0 #D8D8D2 inset, -1px -1px 0 #888 inset;
  color: #444;
  font-family: 'VT323', monospace;
  font-size: 16px;
  padding: 7px 20px 8px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.mac-btn:hover { background: #EEEEE8; }
.mac-btn:active { box-shadow: -1px -1px 0 #D8D8D2 inset, 1px 1px 0 #888 inset; }
.mac-btn.mint-btn {
  border-color: #7EC8BE;
  color: #5CB0AA;
  box-shadow: 1px 1px 0 #B4DED8 inset, -1px -1px 0 #5CB2A8 inset;
}
.mac-btn.mint-btn:hover { background: #E2F6F2; }
.mac-btn.lil {
  border-color: #B4A6F8;
  color: #9280D0;
  box-shadow: 1px 1px 0 #E5DEFF inset, -1px -1px 0 #B4A6F0 inset;
}
.mac-btn.lil:hover { background: #F2EEFF; }

.about-body { display: flex; gap: 12px; align-items: center; }
.about-body svg { width: 64px; flex-shrink: 0; }
.about-body h2 { font-size: 26px; color: #737975; margin-bottom: 5px; line-height: 1.3; }
.about-body p { font-size: 13px; color: #858B87; line-height: 1.6; }
.about-kanji-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.about-kanji-label { font-size: 11px; color: #7EC8BE; letter-spacing: 0.12em; text-transform: lowercase; }

.nav-strip { font-size: 13px; color: #5CB2A8; margin-bottom: 12px; letter-spacing: 0.08em; position: relative; z-index: 1; }
.nav-strip a { color: #448E88; text-decoration: none; }
.nav-strip a:hover { text-decoration: underline; }

.cart-panel {
  display: none;
  position: fixed;
  width: 420px;
  min-width: 280px;
  max-width: 600px;
  min-height: 210px;
  max-height: 55vh;
  background: #FAFAF7;
  border: 2px solid #C89050;
  box-shadow:
    inset 0 0 0 1px #F5D098,
    var(--window-shadow-near) var(--window-shadow-near) 0 rgba(200, 144, 80, 0.62),
    var(--window-shadow-far) var(--window-shadow-far) 0 rgba(180, 166, 248, 0.12);
  z-index: 200;
  transform-origin: bottom right;
  container-type: inline-size;
}
.cart-panel.visible { display: flex; flex-direction: column; }
.cart-panel .win-bar {
  background: #FFE3B3; border-bottom: 2px solid #C89050;
  cursor: grab;
  overflow: hidden;
  flex-shrink: 0;
}
.cart-panel .win-bar:active { cursor: grabbing; }
.cart-panel .win-bar::before, .cart-panel .win-bar::after {
  background-color: #FFE3B3;
  background-image: repeating-linear-gradient(
    90deg, #C89050 1px, transparent 1px 2px
  );
  opacity: 0.7;
}
.cart-panel .win-close { border-color: #C89050; background: #FFE3B3; cursor: pointer; z-index: 310; }
.cart-panel .win-title { color: #8A5010; background: #FFE3B3; }
.cart-body {
  padding: 10px 12px;
  flex: 1;
  min-height: 80px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 1400px;
  transition: max-height 0.4s var(--ease-gooey), padding 0.3s var(--ease-soft);
  font-size: clamp(11px, 5.5cqw, 22px);
  display: flex;
  flex-direction: column;
}
.cart-empty { font-size: 1em; color: #989E9A; }
.cart-item {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 1em; color: #333;
  padding: 0.3em 0; border-bottom: 1px dashed #E0E0D8;
}
.cart-item .item-price { color: #8A5010; padding: 0 6px; flex-shrink: 0; }
.cart-item .item-qty { font-size: 0.85em; color: #8A5010; opacity: 0.9; flex-shrink: 0; padding-right: 2px; }
.remove-btn { font-size: 0.9em; color: #888; cursor: pointer; }
.remove-btn:hover { color: #333; }
.cart-footer {
  padding: 6px 12px 10px;
  flex-shrink: 0;
  border-top: 1px dashed #E0D0B8;
  overflow: hidden;
  max-height: 200px;
  transition: max-height 0.4s var(--ease-gooey), padding 0.3s var(--ease-soft);
}
.cart-total { font-size: 1.1em; color: #8A5010; padding-bottom: 0.4em; text-align: right; }
.checkout-btn {
  display: block; width: 100%;
  background: #FFE3B3;
  border: 1.5px solid #C89050;
  box-shadow: 1px 1px 0 #FFF5E0 inset, -1px -1px 0 #C89050 inset;
  color: #5A2E00; font-family: 'VT323', monospace;
  font-size: 1.1em; padding: 0.3em 0;
  text-align: center; margin-top: 0.6em; cursor: pointer;
}
.checkout-btn:hover { background: #F0C880; }
#termCartBtn {
  display: none;
  margin-left: 16px;
  color: #8A5010;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
}
#termCartBtn:hover { color: #fff; }
.send-popup {
  display: none;
  position: fixed;
  width: 340px;
  background: #FAFAF7;
  border: 2px solid #7EC8BE;
  box-shadow:
    inset 0 0 0 1px #BEE4DC,
    var(--window-shadow-near) var(--window-shadow-near) 0 rgba(126, 200, 190, 0.72),
    var(--window-shadow-far) var(--window-shadow-far) 0 rgba(180, 166, 248, 0.15);
  z-index: 400;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(30px) scaleY(0.7);
  transform-origin: center center;
  opacity: 0;
  transition: transform 0.42s var(--ease-gooey), opacity 0.34s var(--ease-soft);
}
.send-popup.visible {
  display: block;
}
.send-popup.open {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0) scaleY(1);
}
.send-popup .win-bar {
  background: #7EC8BE;
  border-bottom: 2px solid #5CB2A8;
  cursor: default;
}
.send-popup .win-bar::before, .send-popup .win-bar::after {
  background-color: #5CB2A8;
  background-image: repeating-linear-gradient(
    90deg, #448E88 1px, transparent 1px 2px
  );
  opacity: 0.7;
}
.send-popup .win-title { color: #fff; background: #7EC8BE; font-size: 13px; }
.send-popup-body {
  padding: 10px 18px 12px;
  font-family: 'VT323', monospace;
  text-align: center;
}
.send-popup-msg {
  font-size: 24px;
  color: #7EC8BE;
  line-height: 1.2;
  margin-bottom: 4px;
}
.send-popup-sub {
  font-size: 16px;
  color: #858B87;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.send-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.18);
  z-index: 399;
}

.terminal {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 36px;
  background: #111;
  border-top: 1px solid #2a2a2a;
  padding: 0 14px;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 9999;
}
#termText {
  font-family: 'VT323', monospace;
  font-size: 18px;
  line-height: 1;
  color: #7EC8BE;
  white-space: nowrap;
  transition: opacity 0.42s var(--ease-soft);
}
.term-cursor {
  display: inline-block;
  width: 10px; height: 15px;
  background: #7EC8BE;
  vertical-align: middle;
  margin-left: 2px;
  flex-shrink: 0;
  animation: blink 1.1s step-start infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.win-body > *:not(.case-expanded),
.cart-body > *,
.cart-footer > * {
  transition: transform 0.34s var(--ease-gooey);
  transform: translateY(0);
}
.win.shaded .win-body > *:not(.case-expanded),
.cart-panel.shaded .cart-body > *,
.cart-panel.shaded .cart-footer > * {
  transform: translateY(-10px);
}
.win-body {
  overflow: hidden;
  max-height: 1400px;
  transition: max-height 0.4s var(--ease-gooey), padding 0.3s var(--ease-soft);
}
.win.shaded .win-body,
.cart-panel.shaded .cart-body,
.cart-panel.shaded .cart-footer {
  max-height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.cart-panel.shaded .cart-footer {
  border-top-width: 0;
}

.win.shaded .win-bar { min-height: 0 !important; }
.cart-panel.shaded { min-height: 0 !important; height: auto !important; }
.win.shaded .win-bar:hover,
.cart-panel.shaded .win-bar:hover { cursor: pointer; }
.footer-strip { font-size: 12px; color: #72BEB8; text-align: center; margin-top: 4px; position: relative; z-index: 1; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  background: radial-gradient(
    ellipse at center,
    transparent 58%,
    rgba(35, 70, 64, 0.018) 78%,
    rgba(24, 47, 44, 0.055) 100%
  );
}

body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.014) 3px, rgba(0,0,0,0.014) 4px
  );
  animation: scanlines-roll 10s linear infinite;
}

@keyframes scanlines-roll {
  to { background-position: 0 40px; }
}

@keyframes txt-smear {
  0%   { filter: none; transform: none; text-shadow: none; }
  10%  { transform: translateX(-2px) skewX(-0.8deg);
         text-shadow: 3px 0 0 rgba(196,181,253,0.45), -2px 0 0 rgba(154,212,203,0.3); }
  28%  { transform: translateX(3px);
         text-shadow: -4px 0 0 rgba(154,212,203,0.4), 2px 0 0 rgba(196,181,253,0.25); }
  45%  { transform: translateX(-1px) skewX(0.5deg);
         text-shadow: 5px 0 0 rgba(196,181,253,0.2); }
  62%  { transform: translateX(2px);
         text-shadow: -2px 0 0 rgba(154,212,203,0.3), 3px 0 0 rgba(196,181,253,0.15); }
  80%  { transform: translateX(-1px); text-shadow: 1px 0 0 rgba(154,212,203,0.15); }
  100% { filter: none; transform: none; text-shadow: none; }
}

@keyframes ghost-a {
  0%,100% { clip-path: inset(100% 0 0 0); transform: translateX(0); }
  15%  { clip-path: inset(30% 0 55% 0); transform: translateX(-3px); }
  32%  { clip-path: inset(65% 0 10% 0); transform: translateX(4px); }
  50%  { clip-path: inset(12% 0 75% 0); transform: translateX(-2px); }
  68%  { clip-path: inset(80% 0 5% 0);  transform: translateX(3px); }
  85%  { clip-path: inset(48% 0 28% 0); transform: translateX(-2px); }
}
@keyframes ghost-b {
  0%,100% { clip-path: inset(100% 0 0 0); transform: translateX(0); }
  15%  { clip-path: inset(50% 0 25% 0); transform: translateX(4px); }
  32%  { clip-path: inset(18% 0 62% 0); transform: translateX(-3px); }
  50%  { clip-path: inset(74% 0 8% 0);  transform: translateX(2px); }
  68%  { clip-path: inset(36% 0 44% 0); transform: translateX(-3px); }
  85%  { clip-path: inset(85% 0 4% 0);  transform: translateX(2px); }
}

.glitch-el {
  position: relative;
}
.glitch-el::before,
.glitch-el::after {
  content: attr(data-glitch);
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  clip-path: inset(100% 0 0 0);
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
  overflow: hidden;
}
.glitch-el::before { color: rgba(196,181,253,0.65); }
.glitch-el::after  { color: rgba(154,212,203,0.6); }

.is-glitching {
  animation: txt-smear 0.42s steps(6) forwards;
}
.is-glitching::before {
  animation: ghost-a 0.42s steps(6) forwards;
}
.is-glitching::after {
  animation: ghost-b 0.42s steps(6) forwards;
}

@keyframes txt-smear-notranslate {
  0%   { text-shadow: none; }
  20%  { text-shadow: 2px 0 0 rgba(180,166,248,0.35), -1px 0 0 rgba(126,200,190,0.25); }
  60%  { text-shadow: -1px 0 0 rgba(126,200,190,0.25); }
  100% { text-shadow: none; }
}
.win-title.is-glitching {
  animation: txt-smear-notranslate 0.38s steps(5) forwards;
}

@keyframes win-stutter {
  0%   { transform: translateX(0); filter: none; }
  18%  { transform: translateX(-4px); filter: brightness(1.06); }
  36%  { transform: translateX(5px); filter: brightness(0.97) hue-rotate(8deg); }
  52%  { transform: translateX(-2px); filter: none; }
  68%  { transform: translateX(3px); }
  84%  { transform: translateX(-1px); }
  100% { transform: translateX(0); filter: none; }
}
.win-stutter {
  animation: win-stutter 0.34s steps(6) forwards;
}

/* Full page shred — subtle, fires during double bursts */
@keyframes page-shred {
  0%   { filter: none; transform: none; }
  20%  { filter: hue-rotate(12deg) brightness(1.04) saturate(1.15); transform: translateX(-3px); }
  45%  { filter: hue-rotate(-8deg) brightness(0.97); transform: translateX(4px); }
  65%  { filter: brightness(1.04); transform: translateX(-2px); }
  85%  { filter: none; transform: translateX(1px); }
  100% { filter: none; transform: none; }
}
body.page-glitch {
  animation: page-shred 0.28s steps(5) forwards;
}

#termText.term-glitch {
  animation: txt-smear 0.34s steps(5) forwards;
}

.cart-edge {
  position: absolute;
  z-index: 300;
}

.cart-edge-r  { top: 6px;  right: -7px;  width: 13px; bottom: 6px;   cursor: col-resize; }
.cart-edge-b  { left: 6px; bottom: -7px; height: 13px; right: 6px;    cursor: row-resize; }
.cart-edge-l  { top: 6px;  left: -7px;   width: 13px; bottom: 6px;   cursor: col-resize; }

.cart-edge-br { right: -7px;  bottom: -7px; width: 18px; height: 18px; cursor: se-resize; }
.cart-edge-bl { left:  -7px;  bottom: -7px; width: 18px; height: 18px; cursor: sw-resize; }

:is(.win-title,.menubar-item,.logo-kanji){text-shadow:1px 1px 0 rgba(0,0,0,0.22),-1px -1px 0 rgba(255,255,255,0.65);}

:is(.win-body p,.win-body span,.win-body a,.win-body div,.win-body h1,.win-body h2,.win-body h3,.win-body h4,.case-name,.case-status,.case-detail,.release-title,.release-meta,.release-desc,.track,.track-name,.track-num,.track-dur,.order-row,.item-name,.item-price,.cart-item,.cart-total,.cart-empty,.hero-right h1,.hero-right .tagline,.hero-right p,.about-body h2,.about-body p,.nav-strip,.nav-strip a,.field-label,.form-note,.expanded-note,.mac-btn,.footer-strip){text-shadow:1px 1px 0 rgba(0,0,0,0.18),-1px -1px 0 rgba(255,255,255,0.6);}

.case-status,.case-detail,.expanded-note,.photo-thumb .ph-sub,.hero-right p,.about-body p,.release-meta,.form-note { color: #737975; }
.track-num,.track-dur,.cart-empty { color: #7D837F; }
.field-label { color: #777; }

.win-mint .case-status,.win-mint .case-detail { color: #737975; }
.win-lil .case-status,.win-lil .case-detail  { color: #737975; }

.win-mint .win-title   { color: #368880; }
.win-lil  .win-title   { color: #6E4EC8; }

.menubar-item          { color: #444; }
.menubar-item.active   { color: #368880; }
.menubar-item:hover    { color: #222; }

.footer-strip          { color: #4EA49E; }

.case-status.oos { position: relative; }

.win-mint .case-status.oos { color: rgba(28,82,76,.82) !important; }
.win-lil  .case-status.oos { color: rgba(72,44,145,.82) !important; }
.win-mint .win-title.oos   { color: rgba(28,82,76,.58) !important; }
.win-lil  .win-title.oos   { color: rgba(72,44,145,.58) !important; }

.mac-btn.sold-out {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.oos-glitch::before,
.oos-glitch::after {
  content: attr(data-glitch);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  opacity: 0;
}

.oos-glitch::before {
  color: rgba(196, 181, 253, 0.28);
  animation: oos-ghost-a 9s ease-in-out infinite;
}

.oos-glitch::after {
  color: rgba(154, 212, 203, 0.24);
  animation: oos-ghost-b 10.5s ease-in-out infinite;
}

.win-lil .oos-glitch::before { animation-delay: -2.4s; }
.win-lil .oos-glitch::after  { animation-delay: -4.2s; }

@keyframes oos-ghost-a {
  0%,100% { opacity: 0; }
  40%     { opacity: 1; }
  60%     { opacity: 0.7; }
}

@keyframes oos-ghost-b {
  0%,100% { opacity: 0; }
  50%     { opacity: 0.8; }
  70%     { opacity: 0.3; }
}

#kanji-bg {
  position: fixed;
  top: -25%; left: -25%; right: -25%; bottom: -25%;
  z-index: 0;
  pointer-events: none;
  background-color: #FFFFFF;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='320'%3E%3Ctext x='10' y='272' font-family='serif' font-size='246' fill='%23000000'%3E%E7%8E%89%E5%85%8E%3C/text%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='320'%3E%3Ctext x='10' y='272' font-family='serif' font-size='246' fill='%23000000'%3E%E7%8E%89%E5%85%8E%3C/text%3E%3C/svg%3E");
  -webkit-mask-size: 560px 320px;
  mask-size: 560px 320px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  transform: rotate(-11deg);
  animation: kanji-drift 84s linear infinite;
  opacity: 0.7;
}
@keyframes kanji-drift {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to   { -webkit-mask-position: 560px 320px; mask-position: 560px 320px; }
}

.win-menubar { margin-bottom: 0; max-width: 1100px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
.win-menubar .win-body {
  display: flex; align-items: stretch;
  padding: 0; height: 40px; max-height: 40px !important; overflow: hidden; min-width: 600px;
}
.menubar-logo, .menubar-item {
  display: flex; align-items: center;
  height: 100%;
  border-right: 1px solid #D8D8D2;
  text-decoration: none; flex-shrink: 0;
}
.menubar-logo { padding: 0 12px 0 9px; display:flex; align-items:center; }
.menu-logo-img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}
.logo-kanji {
  font-family: 'VT323', monospace;
  font-size: 24px;
  color: #7EC8BE;
  line-height: 1;
  letter-spacing: 2px;
  user-select: none;
}
.logo-kanji-lg { font-size: 44px; }
.menubar-item { padding: 0 22px; font-family: 'VT323', monospace; font-size: 18px; color: #666; letter-spacing: 0.07em; }
.menubar-item:hover { background: #EEEEE8; color: #333; }
.menubar-item.active { background: #EEEEE8; color: #7EC8BE; }

.releases { display: flex; flex-direction: column; gap: 0; }
.releases .win:nth-child(odd) {
  margin-left: 0 !important;
  margin-right: 12px !important;
}
.releases .win:nth-child(even) {
  margin-left: 12px !important;
  margin-right: 0 !important;
}
.release-body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.release-art {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  background: #E8E8E2;
  border: 1.5px solid #C8C8C2;
  box-shadow: inset 1px 1px 0 #F0F0EA, 1px 1px 0 #B0B0A8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  position: relative;
  overflow: hidden;
}
.release-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.release-art .art-placeholder {
  font-size: 11px;
  color: #858B87;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 8px;
  line-height: 1.5;
}
.release-info { flex: 1; }
.release-title {
  font-size: 42px;
  color: #7EC8BE;
  line-height: 1;
  margin-bottom: 2px;
}
.release-title.lil { color: #B4A6F8; }
.release-meta {
  font-size: 15px;
  color: #858B87;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.release-desc {
  font-size: 15px;
  color: #737975;
  line-height: 1.6;
  margin-bottom: 12px;
  max-width: 520px;
}
.tracklist { margin-top: 4px; }
.track {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed #E8E8E0;
  font-size: 16px;
  color: #555;
}
.track:last-child { border-bottom: none; }
.track-num { color: #989E9A; font-size: 14px; width: 18px; flex-shrink: 0; }
.track-name { flex: 1; }
.track-dur { color: #858B87; font-size: 14px; flex-shrink: 0; }
.player {
  margin-top: 12px;
  padding: 10px 12px;
  background: #F4F4F0;
  border: 1.5px solid #C8C8C2;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #D8D8D2;
}
.win-lil .player {
  background: #F7F4FF;
  border-color: #D4C8ED;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #E3DCF2;
}
.player-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.player-btn {
  width: 28px; height: 28px;
  background: #E4F8F4;
  border: 1px solid #7EC8BE;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #AEDCD6;
  color: #408F86;
  font-family: 'VT323', monospace;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  user-select: none;
}
.player-btn:hover:not(:disabled) { background: #C8EDE8; }
.win-lil .player-btn {
  background: #EDE5FF; border-color: #B4A6F8; color: #7866AE;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #C8BEFF;
}
.win-lil .player-btn:hover:not(:disabled) { background: #D8CCFF; }
.player.is-unavailable .player-btn,
.player.is-unavailable .player-progress {
  cursor: not-allowed;
  opacity: 0.55;
}
.player-now-playing {
  flex: 1;
  font-size: 13px;
  color: #408F86;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-time {
  font-size: 12px;
  color: #777;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.player-progress {
  width: 100%;
  height: 3px;
  background: #D8D8D2;
  cursor: pointer;
  position: relative;
}
.player-progress-fill {
  height: 100%;
  background: #7EC8BE;
  width: 0%;
  transition: width 0.16s ease-out;
  pointer-events: none;
}
.player-links {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.player-stats {
  margin-top: 6px;
  color: #888;
  font-size: 13px;
  letter-spacing: 0.06em;
}
.music-total {
  color: #888;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-align: right;
  padding: 8px 2px;
}
.win-lil .player-now-playing { color: #7866AE; }
.win-lil .player-progress-fill { background: #B4A6F8; }
.win-lil .player-stats { color: #8B80A3; }
.stream-link {
  font-size: 11px;
  color: #408F86;
  border: 1px solid #AEDCD6;
  background: #E4F8F4;
  padding: 2px 8px 3px;
  text-decoration: none;
  letter-spacing: 0.06em;
}
.stream-link:hover { background: #C8EDE8; border-color: #7EC8BE; }
.win-lil .stream-link { color: #7866AE; border-color: #C8BEFF; background: #EDE5FF; }
.win-lil .stream-link:hover { background: #D8CCFF; }
.stream-link.is-disabled {
  color: #737975;
  cursor: not-allowed;
  opacity: 0.65;
}
.stream-link.is-disabled:hover {
  background: #E4F8F4;
  border-color: #AEDCD6;
}
.win-lil .stream-link.is-disabled:hover { background: #EDE5FF; border-color: #C8BEFF; }
.track.is-unavailable { cursor: default; opacity: 0.7; }

.order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed #E8E8E0;
  font-size: 15px;
  color: #555;
}
.order-row:last-child { border-bottom: none; }
.order-row .item-name { color: #555; }
.order-row .item-price { color: #7EC8BE; }
.order-row.total-row {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #D8D8D0;
  border-bottom: none;
  font-size: 18px;
}
.order-row.total-row .item-name { color: #444; }
.order-row.total-row .item-price { color: #5CB2A8; }
.empty-cart {
  font-size: 14px; color: #858B87;
  padding: 8px 0;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
.form-grid.full { grid-template-columns: 1fr; }
.form-grid.address-grid { grid-template-columns: minmax(0, 2fr) minmax(76px, 0.7fr) minmax(110px, 1fr); }
.payment-methods {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.pm-badge {
  font-size: 11px;
  color: #8A5010;
  border: 1px solid #E8C880;
  background: #FFF8E8;
  padding: 2px 8px 3px;
  letter-spacing: 0.06em;
}
#payment-element {
  margin-bottom: 10px;
  min-height: 120px;
}
.stripe-loading {
  font-size: 13px; color: #C89050;
  padding: 20px 0;
  text-align: center;
  letter-spacing: 0.08em;
}
.checkout-submit {
  display: block; width: 100%;
  background: #C89050;
  border: 1.5px solid #A87030;
  box-shadow: 1px 1px 0 #F5D098 inset, -1px -1px 0 #A87030 inset;
  color: #fff;
  font-family: 'VT323', monospace;
  font-size: 18px;
  padding: 6px 0 7px;
  cursor: pointer;
  letter-spacing: 0.06em;
  margin-top: 10px;
  transition: background 0.2s var(--ease-soft);
}
.checkout-submit:hover:not(:disabled) { background: #A87030; }
.checkout-submit:disabled { opacity: 0.5; cursor: not-allowed; }
#payment-message {
  font-size: 13px;
  margin-top: 8px;
  letter-spacing: 0.06em;
  min-height: 16px;
}
#payment-message.error { color: #E88; }
#payment-message.success { color: #7EC8BE; }
.success-body {
  text-align: center;
  padding: 20px 0;
}
.success-body .success-icon { font-size: 40px; margin-bottom: 8px; }
.success-body h2 { font-size: 28px; color: #7EC8BE; margin-bottom: 6px; }
.success-body p { font-size: 13px; color: #858B87; line-height: 1.8; }
.config-notice {
  background: #FFF8E8;
  border: 1.5px solid #E8D89A;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #888;
  line-height: 1.7;
  letter-spacing: 0.04em;
}
.config-notice code {
  background: #F0ECD8;
  padding: 1px 5px;
  font-family: monospace;
  font-size: 11px;
  color: #666;
}
.config-notice.hidden { display: none; }

.form-stack { display: flex; flex-direction: column; gap: 12px; }

.field-group { display: flex; flex-direction: column; gap: 4px; }
.field-label {
  font-size: 12px; color: #7D837F;
  letter-spacing: 0.1em;
}
.field-input, .field-textarea {
  background: #F4F4F0;
  border: 1.5px solid #C8C8C2;
  box-shadow: inset 1px 1px 0 #E8E8E2;
  color: #333;
  font-family: 'VT323', monospace;
  font-size: 16px;
  padding: 5px 10px 6px;
  outline: none;
  width: 100%;
  transition: border-color 0.22s var(--ease-soft), box-shadow 0.22s var(--ease-soft);
}
.field-input:focus, .field-textarea:focus { border-color: #7EC8BE; }
.field-input::placeholder, .field-textarea::placeholder { color: #989E9A; }
.field-textarea { resize: vertical; min-height: 110px; line-height: 1.5; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.submit-btn {
  display: inline-block;
  background: #7EC8BE;
  border: 1.5px solid #5CB2A8;
  box-shadow: 1px 1px 0 #AED8D2 inset, -1px -1px 0 #5CB2A8 inset;
  color: #fff;
  font-family: 'VT323', monospace;
  font-size: 18px;
  padding: 5px 28px 6px;
  cursor: pointer;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.submit-btn:hover { background: #5CB2A8; }
.submit-btn:active { box-shadow: -1px -1px 0 #AED8D2 inset, 1px 1px 0 #5CB2A8 inset; }

.form-note {
  font-size: 12px; color: #858B87;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.form-status { min-height: 1.2em; }
.form-status.error { color: #C87070; }
.honeypot-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.success-page {
  min-height: 100%;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 32px 18px;
}
.success-page .win {
  width: min(620px, 100%);
}
.success-page .win-body {
  padding: 30px;
  text-align: center;
}
.success-page h1 {
  color: #7EC8BE;
  font-size: 38px;
  margin-bottom: 12px;
}
.success-page p {
  color: #888;
  font-size: 19px;
  line-height: 1.5;
  margin-bottom: 18px;
}
.success-page a.mac-btn { text-decoration: none; }

.success-msg {
  display: none;
  font-size: 18px; color: #7EC8BE;
  letter-spacing: 0.06em;
  padding: 12px 0;
  line-height: 1.7;
}

/* ── Amber / orange window variant (matches cart) ── */
.win-amber {
  border-color: #C89050;
  box-shadow:
    inset 0 0 0 1px #F5D098,
    var(--window-shadow-near) var(--window-shadow-near) 0 rgba(200, 144, 80, 0.62),
    var(--window-shadow-far) var(--window-shadow-far) 0 rgba(180, 166, 248, 0.12);
}
.win-amber .win-bar { border-bottom-color: #C89050; background: #FFE3B3; }
.win-amber .win-bar::before, .win-amber .win-bar::after {
  background-color: #FFE3B3;
  background-image: repeating-linear-gradient(
    90deg, #C89050 1px, transparent 1px 2px
  );
  opacity: 0.7;
}
.win-amber .win-close { border-color: #C89050; background: #FFE3B3; }
.win-amber .win-title { color: #8A5010; background: #FFE3B3; }
.win-amber .design-name { color: #C89050; }
.win-amber .design-preview { border-color: #E8C880; background: #FFF8E8; }
.win-amber .design-preview:hover { border-color: #C89050; }
.win-amber .design-footer { border-top-color: #F0D8B0; }
.mac-btn.amber {
  border-color: #C89050;
  color: #8A5010;
  box-shadow: 1px 1px 0 #FFF5E0 inset, -1px -1px 0 #C89050 inset;
}
.mac-btn.amber:hover { background: #FFF5E0; }
.design-link.amber {
  color: #8A5010;
  border-color: #E8C880;
  background: #FFF8E8;
}
.design-link.amber:hover { background: #FFE3B3; }

/* ── Designs page ────────────────────────────────── */
.design-preview {
  width: 100%;
  aspect-ratio: 4/3;
  background: #EEEEE8;
  border: 1.5px solid #D0D0C8;
  box-shadow: inset 1px 1px 0 #F8F8F4, inset -1px -1px 0 #C0C0B8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
  cursor: pointer;
}
.design-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.design-preview .preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%; height: 100%;
}
.preview-icon {
  font-size: 38px;
  opacity: 0.28;
}
.preview-label {
  font-size: 12px;
  color: #858B87;
  letter-spacing: 0.08em;
}
.design-preview:hover { border-color: #7EC8BE; }
.design-preview.lil-preview:hover { border-color: #B4A6F8; }

.design-name {
  font-size: 36px;
  line-height: 1;
  color: #7EC8BE;
  margin-bottom: 3px;
}
.design-name.lil { color: #B4A6F8; }
.design-spec {
  font-size: 16px;
  color: #737975;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.design-desc {
  font-size: 15px;
  color: #737975;
  line-height: 1.6;
  margin-bottom: 10px;
  flex: 1;
}
.design-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.design-tag {
  font-size: 11px;
  color: #7EC8BE;
  border: 1px solid #AEDCD6;
  background: #E4F8F4;
  padding: 2px 8px 3px;
  letter-spacing: 0.06em;
}
.design-tag.lil {
  color: #9280D0;
  border-color: #C8BEFF;
  background: #EDE5FF;
}
.design-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px dashed #E0E0D8;
  gap: 6px;
  flex-wrap: wrap;
}
.design-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.design-link {
  font-size: 12px;
  color: #7EC8BE;
  border: 1px solid #AEDCD6;
  background: #E4F8F4;
  padding: 3px 10px 4px;
  text-decoration: none;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.design-link:hover { background: #C8EDE8; }
.design-link.lil {
  color: #9280D0;
  border-color: #C8BEFF;
  background: #EDE5FF;
}
.design-link.lil:hover { background: #D8CCFF; }

.designs-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

@media (max-width: 768px) {
  .designs-flow > .win { flex: none !important; width: 100% !important; margin-top: 0 !important; }
}

@media (max-width: 768px) {

  #header-zone {
    padding: 10px 10px 0;
  }

  .win-menubar .win-body {
    min-width: 0;
    height: 48px;
    max-height: 48px !important;
  }
  .menubar-logo {
    padding: 0 10px 0 8px;
  }
  .menu-logo-img {
    height: 26px;
  }
  .menubar-item {
    padding: 0 14px;
    font-size: 19px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .page-inner {
    padding: 12px 10px 80px;
  }
  .page-inner.narrow {
    padding-bottom: 80px;
  }

  .page#page-shop .win:nth-child(even),
  .page#page-shop .win:nth-child(odd),
  .page#page-music .win:nth-child(even),
  .page#page-music .win:nth-child(odd) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .win-body {
    max-height: 3600px;
  }

  .win .win-body {
    transition: none !important;
  }

  #page-shop .win:not(.shaded) .win-body {
    overflow: visible;
  }

  .win-close {
    width: 20px;
    height: 20px;
    top: 8px;
    left: 8px;
  }

  .case-body {
    gap: 10px;
  }
  .swatch {
    width: 177px;
    height: 100px;
    font-size: 22px;
  }
  .case-name {
    font-size: 44px;
  }
  .case-detail {
    font-size: 16px;
  }
  .case-status {
    font-size: 16px;
  }

  .mac-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    padding: 0 14px;
  }

  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .photo-thumb {
    font-size: 28px;
  }

  .about-body {
    gap: 10px;
  }
  .about-body h2 {
    font-size: 22px;
  }
  .about-body p {
    font-size: 16px;
  }

  .release-body {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .release-art {
    width: 100%;
    height: 160px;
  }
  .release-title {
    font-size: 32px;
  }
  .release-meta {
    font-size: 14px;
  }
  .release-desc {
    font-size: 14px;
    max-width: none;
  }
  .track {
    padding: 8px 0;
    font-size: 16px;
  }
  .track-num, .track-dur { font-size: 14px; }
  .player-btn {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }
  .player-now-playing { font-size: 15px; }
  .player-time { font-size: 13px; }
  .stream-link { font-size: 13px; padding: 4px 12px 5px; }

  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .field-input,
  .field-textarea {
    font-size: 16px;
    padding: 8px 10px;
  }
  .checkout-submit {
    font-size: 20px;
    padding: 10px 0;
  }

  .hero-right h1 {
    font-size: 48px;
  }

  .cart-panel {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    bottom: 26px !important;
    top: auto !important;
    max-height: 42vh;
    overflow-y: auto;
    resize: none;
    border-left: none !important;
    border-right: none !important;
    box-shadow:
      0 calc(-1 * var(--window-shadow-near)) 0 rgba(200, 144, 80, 0.62),
      0 calc(-1 * var(--window-shadow-far)) 0 rgba(180, 166, 248, 0.12) !important;
    transform-origin: bottom center !important;
  }
  .cart-panel .win-bar {
    cursor: default !important;
  }

  .cart-edge { display: none; }

  .win .win-close {
    display: none;
  }

  .win .win-bar {
    cursor: default;
  }

  .case-footer {
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  body.mob-cart-open .page-inner {
    padding-bottom: calc(42vh + 50px);
  }

  .footer-strip {
    margin-bottom: 4px;
  }

  .menubar-item      { font-size: 23px; }
  .case-detail       { font-size: 20px; }
  .case-status       { font-size: 20px; }
  .about-body p      { font-size: 19px; }
  .release-meta      { font-size: 18px; }
  .release-desc      { font-size: 18px; }
  .track             { font-size: 19px; }
  .track-num,.track-dur { font-size: 17px; }
  .field-input,.field-textarea { font-size: 19px; }
  .checkout-submit   { font-size: 24px; }
  .player-now-playing{ font-size: 18px; }
  .stream-link       { font-size: 16px; }
}

.menubar-item        { font-size: 22px; }
.win-title           { font-size: 18px; }
.case-status         { font-size: 22px; }
.case-detail         { font-size: 22px; }
.expanded-note       { font-size: 17px; }
.photo-thumb .ph-sub { font-size: 15px; }
.mac-btn             { font-size: 20px; }
.nav-strip           { font-size: 17px; }
.footer-strip        { font-size: 16px; }
.hero-right .tagline { font-size: 19px; }
.hero-right p        { font-size: 19px; }
.about-body h2       { font-size: 30px; }
.about-body p        { font-size: 17px; }
.release-meta        { font-size: 19px; }
.release-desc        { font-size: 19px; }
.track               { font-size: 20px; }
.track-num           { font-size: 18px; }
.track-dur           { font-size: 18px; }
.player-now-playing  { font-size: 17px; }
.player-time         { font-size: 16px; }
.stream-link         { font-size: 15px; }
.order-row           { font-size: 19px; }
.field-label         { font-size: 15px; }
.field-input         { font-size: 19px; }
.field-textarea      { font-size: 19px; }
.pm-badge            { font-size: 15px; }
.checkout-submit     { font-size: 22px; }
#payment-message     { font-size: 17px; }
.stripe-loading      { font-size: 17px; }
.config-notice       { font-size: 16px; }
.submit-btn          { font-size: 22px; }
.form-note           { font-size: 16px; }
.success-msg         { font-size: 22px; }
.send-popup-msg      { font-size: 26px; }
.send-popup-sub      { font-size: 17px; }

/* ── Tokyo '98 retro-future system layer ─────────── */
.page {
  background: transparent;
  scrollbar-color: #7EC8BE #EDE5FF;
  scrollbar-width: thin;
}

.page-inner {
  position: relative;
}

.win-menubar {
  box-shadow:
    inset 0 0 0 1px #D8D8D2,
    var(--window-shadow-near) var(--window-shadow-near) 0 rgba(112, 118, 114, 0.42),
    var(--window-shadow-far) var(--window-shadow-far) 0 rgba(180, 166, 248, 0.13);
}

.page-inner > .win {
  isolation: isolate;
  box-shadow:
    inset 0 0 0 1px #D8D8D2,
    var(--window-shadow-near) var(--window-shadow-near) 0 rgba(112, 118, 114, 0.42),
    var(--window-shadow-far) var(--window-shadow-far) 0 rgba(180, 166, 248, 0.13);
}
.page-inner > .win.win-mint {
  box-shadow:
    inset 0 0 0 1px #B4DED8,
    var(--window-shadow-near) var(--window-shadow-near) 0 rgba(126, 200, 190, 0.72),
    var(--window-shadow-far) var(--window-shadow-far) 0 rgba(180, 166, 248, 0.15);
}
.page-inner > .win.win-lil {
  box-shadow:
    inset 0 0 0 1px #DED6FF,
    var(--window-shadow-near) var(--window-shadow-near) 0 rgba(180, 166, 248, 0.72),
    var(--window-shadow-far) var(--window-shadow-far) 0 rgba(126, 200, 190, 0.15);
}
.page-inner > .win.win-amber {
  box-shadow:
    inset 0 0 0 1px #F5D098,
    var(--window-shadow-near) var(--window-shadow-near) 0 rgba(200, 144, 80, 0.62),
    var(--window-shadow-far) var(--window-shadow-far) 0 rgba(180, 166, 248, 0.12);
}
.page-inner > .win .win-title::before {
  content: '◆';
  margin-right: 6px;
  color: #FF72B6;
  font-size: 0.65em;
  vertical-align: 0.12em;
}
.page-inner > .win.win-lil .win-title::before {
  color: #5CB2A8;
}
.page-inner > .win.win-amber .win-title::before {
  color: #B4A6F8;
}

.win-bar {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(40, 60, 56, 0.08);
}

:is(.case-name, .release-title, .design-name, .hero-right h1) {
  text-shadow:
    1px 0 0 rgba(255, 75, 160, 0.18),
    -1px 0 0 rgba(50, 210, 195, 0.18);
}

:is(.mac-btn, .stream-link, .design-link, .player-btn) {
  transition: transform 0.16s var(--ease-gooey), box-shadow 0.16s var(--ease-soft), background 0.2s var(--ease-soft);
}
:is(.mac-btn, .stream-link, .design-link, .player-btn):hover:not(:disabled) {
  transform: translate(-1px, -1px);
  filter: saturate(1.08);
}

.terminal {
  background:
    linear-gradient(90deg, rgba(126, 200, 190, 0.055), transparent 35%),
    #101218;
  border-top: 2px solid #7EC8BE;
  box-shadow: inset 0 1px 0 rgba(255, 114, 182, 0.72);
}
.terminal::after {
  content: 'TOKYO//NET 98  ◆  ONLINE';
  margin-left: auto;
  padding-left: 16px;
  color: #B4A6F8;
  font-size: 12px;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
#termText {
  text-shadow:
    1px 0 0 rgba(255, 114, 182, 0.3),
    -1px 0 0 rgba(126, 200, 190, 0.26);
}

@media (max-width: 600px) {
  .terminal::after {
    content: 'T//98';
    padding-left: 8px;
    font-size: 10px;
  }
}

/* Softer shared interaction motion */
:is(.menubar-item, .menubar-logo, .win-close) {
  transition:
    background-color 0.22s var(--ease-soft),
    color 0.22s var(--ease-soft),
    border-color 0.22s var(--ease-soft),
    opacity 0.22s var(--ease-soft);
}

:is(.win, .cart-panel, .player, .design-preview) {
  transition:
    box-shadow 0.3s var(--ease-soft),
    border-color 0.3s var(--ease-soft);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  #header-zone::before,
  body::before,
  body::after,
  .term-cursor {
    animation: none !important;
  }
}