:root { --paper:#f4efe6; --ink:#1d1b18; --muted:#7a7268; --line:#ddd4c6; --sun:#e8743b; --sea:#2f6f73; --sand:#e9dcc6; }
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font-family:Inter,system-ui,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; }
.mono { font-family:"IBM Plex Mono",ui-monospace,monospace; }
.small { font-size:12px; letter-spacing:.08em; }
.muted { color:var(--muted); }
a { color:inherit; }
.nav { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; padding:14px 5vw; font-size:12px; letter-spacing:.1em; background:rgba(244,239,230,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav nav a { margin-left:18px; text-decoration:none; color:var(--muted); }
.nav nav a:hover { color:var(--ink); }
section { max-width:1040px; margin:0 auto; padding:12vh 5vw; }
h2 { font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(40px,6vw,76px); line-height:1; margin:10px 0 12px; letter-spacing:-.01em; }
.hero { max-width:none; padding:0; position:relative; min-height:92vh; min-height:92svh; display:flex; align-items:flex-end; overflow:hidden; }
.sky { position:absolute; inset:0; transition:background 1s; color:rgba(29,27,24,.75); }
.sun { position:absolute; width:22vmin; height:22vmin; border-radius:50%; left:62%; transition:top 1s, background 1s, box-shadow 1s; }
.palms { position:absolute; bottom:0; left:0; width:100%; height:45%; }
.hero-text { position:relative; padding:0 5vw 9vh; }
#title { font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(150px,30vw,420px); line-height:.8; letter-spacing:-.04em; display:flex; user-select:none; }
#title span { display:inline-block; transition:transform .5s cubic-bezier(.2,1.4,.4,1), font-style .2s; cursor:default; }
#title span:hover { transform:translateY(-14px) rotate(-3deg); font-style:italic; }
#title .dot { color:var(--sun); cursor:pointer; }
.lede { font-size:clamp(18px,2.2vw,26px); max-width:620px; margin-top:12px; }
.lede em { font-family:"Instrument Serif",serif; font-size:1.15em; }
.hint { margin-top:14px; color:rgba(29,27,24,.55); }
.index { padding-top:6vh; padding-bottom:0; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.card { background:var(--paper); padding:26px 22px; text-decoration:none; display:flex; flex-direction:column; gap:6px; transition:background .25s; }
.card:hover { background:var(--sand); }
.card b { font-family:"Instrument Serif",serif; font-weight:400; font-size:34px; line-height:1; }
.card i { color:var(--muted); font-size:14px; }
.btn { font-family:"IBM Plex Mono",monospace; font-size:13px; padding:9px 16px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); border-radius:999px; cursor:pointer; transition:transform .1s; }
.btn:active { transform:scale(.96); }
.btn.ghost { background:transparent; color:var(--ink); }
.seq-controls { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:18px 0; font-size:13px; }
.seq-controls input { accent-color:var(--sun); vertical-align:middle; }
.seq { display:grid; grid-template-columns:70px repeat(16,1fr); gap:4px; }
.seq .label { font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted); display:flex; align-items:center; }
.seq .cell { aspect-ratio:1; border:1px solid var(--line); background:#fffaf2; border-radius:4px; cursor:pointer; padding:0; transition:background .1s, transform .1s; }
.seq .cell:nth-child(17n+6), .seq .cell:nth-child(17n+10), .seq .cell:nth-child(17n+14) { margin-left:0; }
.seq .cell.beat { background:#f6efe3; }
.seq .cell.on { background:var(--ink); border-color:var(--ink); }
.seq .cell.on.row2 { background:var(--sea); border-color:var(--sea); }
.seq .cell.on.row3 { background:var(--sun); border-color:var(--sun); }
.seq .cell.now { outline:2px solid var(--sun); outline-offset:1px; }
.seq .cell.on.now { transform:scale(1.12); }
.puzzle-wrap { display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap; margin-top:20px; }
.puzzle { position:relative; width:min(360px,86vw); aspect-ratio:1; background:var(--line); border-radius:12px; }
.tile { position:absolute; width:calc((100% - 16px) / 3); height:calc((100% - 16px) / 3); display:flex; align-items:center; justify-content:center; background:#fffaf2; border:1px solid var(--line); border-radius:10px;
  font-family:"Instrument Serif",serif; font-size:clamp(42px,9vw,64px); cursor:pointer; transition:left .15s ease, top .15s ease, background .2s; user-select:none; }
.tile.movable:hover { background:var(--sand); }
.puzzle.solved .tile { background:var(--sand); border-color:var(--sun); }
.puzzle-side p { margin-bottom:8px; font-size:14px; }
.fit-wrap { display:flex; gap:30px; flex-wrap:wrap; align-items:flex-start; margin-top:20px; }
.figure { width:min(220px,50vw); background:#fffaf2; border:1px solid var(--line); border-radius:14px; padding:14px; }
.figure path, .figure rect { transition:fill .35s; }
.fit-controls { flex:1; min-width:260px; display:grid; gap:18px; }
.fit-controls h3 { font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:12px; letter-spacing:.1em; color:var(--muted); margin-bottom:8px; text-transform:uppercase; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:#fffaf2; cursor:pointer; font-size:14px; font-family:inherit; color:inherit; }
.chip i { width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.15); }
.chip.sel { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.verdict { margin-top:24px; font-family:"Instrument Serif",serif; font-size:clamp(24px,3vw,34px); min-height:1.3em; }
.simon { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:min(320px,80vw); margin-top:20px; }
.pad { aspect-ratio:1; border:0; border-radius:14px; cursor:pointer; opacity:.55; transition:opacity .1s, transform .1s; }
.pad[data-i="0"] { background:var(--sun); border-top-left-radius:60%; } .pad[data-i="1"] { background:var(--sea); border-top-right-radius:60%; }
.pad[data-i="2"] { background:#c9a227; border-bottom-left-radius:60%; } .pad[data-i="3"] { background:var(--ink); border-bottom-right-radius:60%; }
.pad.lit { opacity:1; transform:scale(1.04); box-shadow:0 0 30px rgba(232,116,59,.35); }
.simon.locked .pad { cursor:default; }
.notes { margin-top:16px; border-top:1px solid var(--ink); }
.notes div { display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); }
.notes dt { font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.notes dd { font-family:"Instrument Serif",serif; font-size:clamp(20px,2.4vw,28px); text-align:right; }
footer { text-align:center; padding:8vh 5vw; color:var(--muted); }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:999px; font-size:13px; opacity:0; transition:opacity .3s, transform .3s; pointer-events:none; z-index:50; }
.toast.on { opacity:1; transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .9s, transform .9s; }
.reveal.in { opacity:1; transform:none; }
@media (max-width:640px) { .seq { grid-template-columns:44px repeat(16,1fr); gap:2px; } .seq .label { font-size:9px; } .nav nav a { margin-left:10px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } .reveal { opacity:1; transform:none; } }