:root { --ink:#171714; --paper:#f2efe7; --accent:#ff5c35; --acid:#c7f36b; --line:rgba(23,23,20,.22); --muted:#6f6d65; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:#e6e2d8; font-family:Manrope,sans-serif; }
button,input { font:inherit; color:inherit; }
button { cursor:pointer; }
.memory-header { position:sticky; z-index:20; top:0; height:72px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(242,239,231,.95); backdrop-filter:blur(14px); }
.memory-brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; font-size:18px; font-weight:700; letter-spacing:-.04em; }
.memory-brand>span { height:22px; display:flex; align-items:end; gap:2px; }
.memory-brand i { display:block; width:6px; background:currentColor; }
.memory-brand i:nth-child(1){height:12px}.memory-brand i:nth-child(2){height:22px}.memory-brand i:nth-child(3){height:17px}
.memory-header>button,.memory-start,.memory-complete button { border:1px solid var(--ink); background:var(--ink); color:var(--paper); padding:11px 15px; font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.memory-progress { display:flex; align-items:baseline; gap:7px; font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.memory-progress strong { font-size:17px; }
.memory-progress b { margin-left:16px; color:var(--muted); font-weight:500; }
.memory-main { min-height:calc(100vh - 72px); }
.memory-intro { min-height:calc(100vh - 72px); width:min(1180px,calc(100% - 48px)); margin:auto; display:grid; grid-template-columns:1fr minmax(360px,.72fr); gap:8vw; align-items:center; padding:70px 0; }
.memory-kicker { margin:0 0 25px; color:var(--accent); font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.13em; }
.intro-copy h1,.memory-complete h2 { margin:0; font-weight:500; font-size:clamp(66px,8vw,120px); line-height:.88; letter-spacing:-.07em; }
.intro-copy h1 em,.memory-complete h2 em { color:var(--accent); font-family:Georgia,serif; font-weight:400; }
.intro-copy>p:last-child { max-width:520px; margin:35px 0 0; color:var(--muted); line-height:1.7; }
.memory-form { padding:28px; border:1px solid var(--ink); background:var(--paper); box-shadow:12px 12px 0 var(--ink); }
.memory-form fieldset { margin:0 0 20px; padding:18px; border:1px solid var(--line); }
.memory-form legend,.memory-form>label { font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.memory-categories { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.memory-categories label { display:flex; align-items:center; gap:8px; font-size:12px; }
.memory-form>label { display:grid; gap:8px; }
.memory-form input[type="number"] { width:100%; padding:12px; border:1px solid var(--line); background:white; }
.memory-start { width:100%; margin-top:20px; }
.memory-warning { color:#a32818; font-size:12px; }
.memory-game { padding:32px; }
.memory-game[hidden],.memory-intro[hidden],.memory-complete[hidden] { display:none; }
.memory-board { width:min(1100px,100%); margin:auto; display:grid; grid-template-columns:repeat(var(--memory-columns,4),minmax(0,1fr)); gap:14px; }
.memory-card { min-width:0; padding:0; border:0; background:none; aspect-ratio:3/4; perspective:1000px; }
.memory-card-inner { position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .42s cubic-bezier(.2,.75,.2,1); }
.memory-card.revealed .memory-card-inner,.memory-card.matched .memory-card-inner { transform:rotateY(180deg); }
.memory-card-back,.memory-card-face { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; border:2px solid var(--ink); backface-visibility:hidden; }
.memory-card-back { background-position:center; background-size:cover; }
.memory-card-back::after { content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.68); }
.memory-card-face { padding:13%; background:var(--paper); transform:rotateY(180deg); }
.memory-card-face img { width:100%; height:100%; object-fit:contain; }
.memory-symbol-word { width:100%; display:flex; justify-content:center; align-items:center; }
.memory-symbol-word svg { width:min(42px,calc(94% / var(--letters))); height:min(42px,calc(94% / var(--letters))); flex:0 0 auto; }
.memory-card .outline,.memory-card .split { fill:none; stroke:currentColor; stroke-width:2.25; vector-effect:non-scaling-stroke; }
.memory-card .filled,.memory-card .accent-fill { fill:currentColor; }
.memory-card:not(.matched):hover .memory-card-inner { translate:0 -2px; }
.memory-card.matched { opacity:.62; }
.memory-complete { position:fixed; z-index:30; inset:72px 0 0; display:grid; place-content:center; justify-items:center; text-align:center; padding:24px; background:var(--acid); }
.memory-complete h2 { font-size:clamp(64px,9vw,120px); }
.memory-complete>p:not(.memory-kicker) { margin:28px 0; font:500 12px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
@media(max-width:760px){
  .memory-header { height:64px; padding:0 14px; }
  .memory-header>button { padding:9px 10px; }
  .memory-progress span:last-of-type,.memory-progress b { display:none; }
  .memory-main { min-height:calc(100vh - 64px); }
  .memory-intro { min-height:auto; width:calc(100% - 28px); grid-template-columns:1fr; gap:38px; padding:50px 0; }
  .intro-copy h1 { font-size:clamp(58px,19vw,82px); }
  .memory-form { padding:20px; box-shadow:7px 7px 0 var(--ink); }
  .memory-categories { grid-template-columns:1fr; }
  .memory-game { padding:14px 10px 24px; }
  .memory-board { gap:7px; }
  .memory-card-back,.memory-card-face { border-width:1.5px; }
  .memory-card-face { padding:9%; }
  .memory-symbol-word svg { width:min(27px,calc(96% / var(--letters))); height:min(27px,calc(96% / var(--letters))); }
  .memory-complete { inset:64px 0 0; }
}
@media(max-width:370px){.memory-brand{font-size:16px}.memory-progress{gap:4px}}
@media(prefers-reduced-motion:reduce){.memory-card-inner{transition:none}}