:root{--ink:#231A17;--soft:#5E4C41;--cream:#F6EEE2;--paper:#FFFBF4;--walnut:#7A5234;--dust:#C2B09A;--jade:#0B7A68;--mint:#19C7A5;--slot:#DFD3C0;}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--cream);background-image:radial-gradient(120% 80% at 50% 0%,#FCF6EC 0%,var(--cream) 62%,#EDE2D1 100%);color:var(--ink);font-family:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;}.stage{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(0.6rem,0.3rem + 1.6vw,1.3rem);padding:clamp(0.9rem,0.5rem + 2vw,1.8rem) 1rem calc(0.9rem + env(safe-area-inset-bottom));max-width:60rem;margin:0 auto;text-align:center;}.logo{width:clamp(72px,16vw,160px);height:auto;aspect-ratio:1 / 1;border-radius:22%;display:block;}h1{font-family:"Lilita One",Georgia,serif;font-weight:400;line-height:1.03;letter-spacing:0.004em;font-size:clamp(1.85rem,1.1rem + 4.4vw,3.5rem);max-width:16ch;}h1 .glow{color:var(--jade)}.support{font-size:clamp(0.95rem,0.88rem + 0.4vw,1.12rem);line-height:1.45;color:var(--soft);max-width:40ch;}.unit{width:100%;max-width:34rem;flex:0 1 auto;}.cases-stack{position:relative;height:clamp(196px,46vw,258px);}.face{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,1.6vw,14px);align-items:end;opacity:1;transition:opacity 260ms ease;}.face.fading{opacity:0}.face[hidden]{display:none}.case{height:100%;border-radius:10px 10px 3px 3px;display:flex;flex-direction:column;justify-content:flex-end;padding:0.5rem 0.4rem 0.55rem;box-shadow:0 10px 16px -10px rgba(35,26,23,0.5);position:relative;overflow:hidden;}.case::after{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(90deg,rgba(255,255,255,0.22),rgba(255,255,255,0));}.case:nth-child(1){transform:rotate(-1.4deg)}.case:nth-child(2){transform:rotate(0.8deg)}.case:nth-child(3){transform:rotate(-0.6deg)}.case:nth-child(4){transform:rotate(1.5deg)}.face[data-for="with"] .case:nth-child(1){background:#263B47}.face[data-for="with"] .case:nth-child(2){background:#5E2B3E}.face[data-for="with"] .case:nth-child(3){background:#27402E}.face[data-for="with"] .case:nth-child(4){background:#2B2440}.case .name{font-family:"Lilita One",Georgia,serif;font-weight:400;color:var(--paper);font-size:clamp(0.62rem,0.42rem + 1.1vw,0.98rem);line-height:1.08;letter-spacing:0.01em;}.case .tag{margin-top:0.3rem;font-size:clamp(0.52rem,0.4rem + 0.5vw,0.68rem);color:var(--mint);letter-spacing:0.05em;text-transform:uppercase;font-weight:600;}.face[data-for="without"] .case{background:var(--slot);box-shadow:inset 0 0 0 1px rgba(122,82,52,0.18),0 8px 14px -11px rgba(35,26,23,0.4);align-items:center;justify-content:center;}.face[data-for="without"] .case::after{display:none}.mark{font-family:"Lilita One",Georgia,serif;font-size:clamp(1.1rem,0.7rem + 2.1vw,1.9rem);color:#6E5C4A;}.board{height:clamp(10px,2.2vw,16px);border-radius:3px;background:linear-gradient(180deg,#8C6040 0%,var(--walnut) 55%,#5E3C26 100%);box-shadow:0 12px 20px -14px rgba(35,26,23,0.75);}.board-note{margin-top:0.55rem;font-size:clamp(0.76rem,0.7rem + 0.3vw,0.9rem);color:var(--soft);min-height:1.4em;}.action{width:100%;max-width:34rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0.7rem 1rem;margin-top:clamp(1rem,3.5vh,2.2rem);}.cta{flex:1 1 15rem;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0.85rem 1.4rem;border-radius:14px;background:var(--jade);color:#FFFFFF;text-decoration:none;font-weight:600;font-size:clamp(1rem,0.94rem + 0.4vw,1.14rem);letter-spacing:0.01em;box-shadow:0 14px 24px -16px rgba(11,122,104,0.95);-webkit-tap-highlight-color:transparent;transition:transform 160ms ease;}.cta:focus-visible{outline:3px solid var(--ink);outline-offset:3px}@media (hover: hover) and (pointer: fine){.cta:hover{transform:translateY(-2px)}}.flip{flex:0 0 auto;display:inline-flex;align-items:center;gap:0.5rem;background:none;border:0;cursor:pointer;min-height:48px;padding:0.25rem 0.2rem;font-family:inherit;color:var(--soft);-webkit-tap-highlight-color:transparent;}.flip:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:12px}.flip .word{font-size:0.8rem;font-weight:600;letter-spacing:0.02em;white-space:nowrap;}.track{width:62px;height:34px;border-radius:999px;background:var(--dust);position:relative;flex:0 0 auto;transition:background 220ms ease;box-shadow:inset 0 1px 3px rgba(35,26,23,0.25);}.knob{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:var(--paper);box-shadow:0 2px 5px rgba(35,26,23,0.35);transition:transform 220ms ease;}[data-side="with"] .track{background:var(--jade)}[data-side="with"] .knob{transform:translateX(28px)}[data-side="with"] .word-with{color:var(--jade)}[data-side="without"] .word-without{color:var(--ink)}.nudge .knob{animation:nudge 900ms ease 500ms 1}@keyframes nudge{0%{transform:translateX(28px)}45%{transform:translateX(20px)}100%{transform:translateX(28px)}}.under{flex:1 0 100%;font-size:clamp(0.8rem,0.76rem + 0.2vw,0.9rem);color:var(--soft);line-height:1.4;}footer{margin-top:auto;padding-top:0.9rem;font-size:0.76rem;color:#6B5848;letter-spacing:0.02em;}@media (min-width: 760px){.stage{gap:1rem;padding-top:1.6rem}.logo{width:116px}h1{font-size:clamp(2.2rem,1.2rem + 2.6vw,2.9rem);max-width:20ch}.cases-stack{height:188px}.unit{max-width:34rem}.action{max-width:34rem;margin-top:1.2rem}.board-note{margin-top:0.45rem}}@media (min-width: 760px) and (max-height: 860px){.stage{gap:0.75rem;padding-top:1rem}.logo{width:96px}.cases-stack{height:164px}.action{margin-top:0.9rem}}@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}