:root { --ink: #f1eee5; --muted: #9095a5; --night: #0b0e16; --panel: #131824; --line: rgba(241,238,229,.16); --cyan: #9ce4e6; --pink: #f0a8b9; --yellow: #ffe28a; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--night); color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; }
.starfield { position: fixed; z-index: -1; inset: 0; opacity: .47; background-image: radial-gradient(circle at 13% 23%, rgba(255,226,138,.7) 0 1px, transparent 1.5px), radial-gradient(circle at 78% 16%, rgba(156,228,230,.6) 0 1px, transparent 1.5px), radial-gradient(circle at 91% 71%, rgba(240,168,185,.65) 0 1px, transparent 1.5px), radial-gradient(circle at 38% 84%, rgba(255,255,255,.5) 0 1px, transparent 1.5px); background-size: 251px 193px, 331px 271px, 419px 313px, 503px 401px; }
.page-shell { width: min(100% - 48px, 1040px); margin: 0 auto; }
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 26px 0 20px; border-bottom: 1px solid var(--line); color: var(--muted); font: 10px ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: .1em; }.brand-lockup { display: flex; align-items: center; gap: 10px; color: var(--ink); }.brand-light { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 13px 3px rgba(240,168,185,.58); }.brand-slash { color: var(--pink); margin: 0 3px; }.header-status { display: flex; align-items: center; gap: 9px; }.status-pulse { width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 0 4px rgba(156,228,230,.13); }.header-time { color: var(--ink); margin-left: 13px; }
.intro { display: flex; justify-content: space-between; gap: 60px; align-items: end; padding: 75px 5px 52px; }.overline { color: var(--cyan); margin: 0 0 21px; font: 10px ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: .17em; }.overline span { color: var(--yellow); margin-left: 10px; }.intro h1 { margin: 0 0 25px; font-size: clamp(48px, 8vw, 90px); line-height: .97; letter-spacing: -.08em; font-weight: 900; }.intro h1 i { color: var(--pink); font-family: Georgia, serif; font-weight: 400; letter-spacing: -.1em; }.intro-text { color: var(--muted); font-size: 14px; line-height: 1.9; }.coin-balance { display: flex; align-items: center; gap: 9px; width: fit-content; margin-top: 31px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); color: var(--muted); font: 11px ui-monospace, 'SFMono-Regular', Consolas, monospace; }.coin-balance strong { color: var(--yellow); font-size: 16px; margin-left: 10px; }.coin { display: inline-grid; place-items: center; color: var(--yellow); border: 1px solid rgba(255,226,138,.7); border-radius: 50%; }.coin-small { width: 21px; height: 21px; font-size: 10px; }.intro-note { position: relative; width: 210px; padding: 23px 23px 19px; border: 1px solid rgba(240,168,185,.44); color: var(--pink); transform: rotate(3deg); }.intro-note p { margin: 0 0 28px; font-family: Georgia, serif; font-size: 19px; line-height: 1.3; }.note-pin { position: absolute; right: 13px; top: 11px; color: var(--yellow); font-size: 10px; }.note-sign { color: var(--muted); font: 9px ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: .03em; }
.machine-wrap { position: relative; padding: 20px 0 74px; }.machine-glow { position: absolute; width: 55%; height: 30%; bottom: 8%; left: 22%; border-radius: 50%; background: rgba(156,228,230,.14); filter: blur(70px); }.machine { position: relative; width: min(100%, 700px); margin: 0 auto; padding: 14px 18px 16px; border: 1px solid #343b4b; border-radius: 9px; background: linear-gradient(135deg, #1a202d, #10141e 63%, #090c13); box-shadow: 0 26px 70px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.025); }.machine-top, .machine-bottom { display: flex; justify-content: space-between; padding: 0 4px 11px; color: #666d7f; font: 9px ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: .08em; }.machine-bottom { padding: 12px 4px 0; border-top: 1px solid rgba(255,255,255,.08); }.machine-window { position: relative; overflow: hidden; min-height: 373px; padding: 25px 26px 27px; border: 1px solid #313949; border-radius: 5px; background: radial-gradient(circle at 50% 0%, #26344b, #101722 58%, #0b1019); }.window-reflection { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 18%, rgba(255,255,255,.035) 19%, transparent 32%), linear-gradient(76deg, transparent 67%, rgba(255,255,255,.035) 68%, transparent 81%); }.window-sign { position: relative; display: flex; flex-direction: column; gap: 6px; width: fit-content; margin-bottom: 20px; color: var(--muted); }.window-sign span, .window-sign small { font: 9px ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: .14em; }.window-sign strong { color: var(--ink); font-family: Georgia, serif; font-size: 24px; font-weight: 400; }.products { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 13px; padding-top: 11px; }.product { position: relative; display: flex; flex-direction: column; align-items: center; gap: 11px; min-width: 0; padding: 0 6px 15px; border-bottom: 1px solid rgba(255,255,255,.12); }.product::after { content: ''; position: absolute; bottom: 0; left: 20%; right: 20%; height: 2px; background: rgba(156,228,230,.22); }.product-illustration { display: grid; place-items: center; width: 112px; height: 129px; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.025)); color: var(--yellow); font-family: Georgia, serif; font-size: 48px; box-shadow: inset 0 0 28px rgba(0,0,0,.27); }.product:nth-child(2) .product-illustration { color: var(--pink); }.product:nth-child(3) .product-illustration { color: var(--cyan); }.product:nth-child(4) .product-illustration { color: #c3b2ff; }.product-name { max-width: 110px; color: var(--ink); font-size: 12px; line-height: 1.35; text-align: center; }.product-price { color: var(--muted); font: 9px ui-monospace, 'SFMono-Regular', Consolas, monospace; }.product-button { position: absolute; inset: 0; border: 0; background: transparent; }.product.selected .product-illustration { border-color: var(--yellow); box-shadow: 0 0 22px rgba(255,226,138,.16), inset 0 0 28px rgba(0,0,0,.27); transform: translateY(-4px); }.product.selected .product-name { color: var(--yellow); }
.machine-console { display: flex; gap: 16px; align-items: stretch; padding: 18px 4px 10px; }.console-screen { display: flex; flex: 1; min-height: 81px; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 15px; border: 1px solid #344151; border-radius: 4px; background: #090d13; }.screen-label { color: #5e6d7b; font: 8px ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: .15em; }.console-screen strong { overflow: hidden; color: var(--cyan); font: 14px ui-monospace, 'SFMono-Regular', Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }.screen-message { color: var(--muted); font-size: 10px; }.console-actions { display: flex; gap: 9px; }.coin-slot, .dispense-button { border: 1px solid #3e4c5c; border-radius: 4px; }.coin-slot { display: flex; min-width: 116px; flex-direction: column; justify-content: center; align-items: center; gap: 7px; background: #181e2a; color: var(--ink); font-size: 10px; }.coin-slot-icon { width: 24px; height: 24px; font-size: 11px; }.dispense-button { min-width: 87px; background: var(--pink); color: #1d1720; font-size: 11px; font-weight: 700; }.dispense-button:disabled { cursor: not-allowed; background: #29303c; color: #626b7a; border-color: #303a48; }.dispense-button span { display: inline-block; margin-left: 8px; }.machine.shake { animation: shake .4s ease; }
.receipt-area { position: relative; width: min(100% - 90px, 460px); margin: -10px auto 85px; padding: 29px 27px 26px; color: #1c2024; background: #f1e7cf; box-shadow: 0 18px 50px rgba(0,0,0,.25); transform: rotate(-1.3deg); }.receipt-torn { position: absolute; top: -9px; left: 0; width: 100%; height: 11px; background: linear-gradient(135deg, transparent 5px, #f1e7cf 0) 0 0/14px 11px repeat-x; }.receipt-head, .receipt-item, .receipt-footer { display: flex; justify-content: space-between; font: 10px ui-monospace, 'SFMono-Regular', Consolas, monospace; }.receipt-head { padding-bottom: 17px; border-bottom: 1px dashed rgba(28,32,36,.3); }.receipt-item { padding: 19px 0 16px; font-size: 11px; }.receipt-rule { border-top: 1px dashed rgba(28,32,36,.3); }.receipt-area p { min-height: 70px; margin: 20px 0 24px; font-family: Georgia, serif; font-size: 22px; line-height: 1.35; }.receipt-area p small { display: block; margin-top: 10px; color: #687078; font: 11px ui-monospace, 'SFMono-Regular', Consolas, monospace; }.receipt-footer { padding-top: 15px; border-top: 1px dashed rgba(28,32,36,.3); color: #687078; font-size: 9px; }.share-button { display: block; margin: 27px auto 0; padding: 9px 14px; border: 1px solid rgba(28,32,36,.4); border-radius: 99px; background: transparent; color: #1c2024; font-size: 10px; }.share-button span { color: #ba586a; margin-left: 7px; }.share-feedback { display: block; min-height: 15px; margin-top: 10px; color: #687078; font: 9px ui-monospace, 'SFMono-Regular', Consolas, monospace; text-align: center; }
.footer-note { display: flex; align-items: center; gap: 22px; justify-content: center; margin-bottom: 75px; color: var(--muted); text-align: center; }.footer-note p { margin: 0; font-family: Georgia, serif; font-size: 17px; line-height: 1.5; }.footer-note i { color: var(--pink); font-weight: 400; }.footer-line { width: 66px; height: 1px; background: var(--line); }.site-footer { display: flex; justify-content: space-between; padding: 20px 0 29px; border-top: 1px solid var(--line); color: #626b7a; font: 9px ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: .03em; }
button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.product-button:focus-visible { outline-offset: -2px; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px) rotate(-.6deg); } 75% { transform: translateX(5px) rotate(.6deg); } }
@media (max-width: 700px) { .page-shell { width: min(100% - 30px, 560px); }.site-header { padding: 20px 0; }.header-time { display: none; }.intro { display: block; padding: 60px 2px 38px; }.intro-note { margin: 44px 0 0 auto; }.machine-wrap { padding-bottom: 48px; }.machine { padding: 11px 11px 13px; }.machine-window { min-height: 0; padding: 21px 14px 18px; }.products { grid-template-columns: repeat(2, 1fr); gap: 17px 9px; }.product-illustration { width: 100%; height: 103px; font-size: 39px; }.product-name { font-size: 11px; }.machine-console { flex-direction: column; padding: 14px 0 6px; }.console-actions { min-height: 62px; }.coin-slot, .dispense-button { flex: 1; }.receipt-area { width: calc(100% - 30px); margin-bottom: 60px; }.footer-note { gap: 12px; margin-bottom: 55px; }.footer-line { width: 30px; }.site-footer { gap: 10px; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .machine.shake { animation: none; } }