:root{--paper:#f4efe4;--ink:#1d2a2e;--teal:#3a9a8c;--amber:#d9963a;--deep:#0b1f28;--muted:#5e6b6e}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;color:var(--ink);font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;line-height:1.6;font-size:18px}
main{max-width:720px;margin:0 auto;padding:2.5rem 1.25rem 4rem}
nav{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;letter-spacing:.02em;display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2.5rem}
nav a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--muted);padding-bottom:1px}
nav a[aria-current]{color:var(--teal);border-bottom:2px solid var(--teal)}
nav a:hover,nav a:focus{color:var(--teal)}
header.desk{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem}
header.desk img{width:120px;height:120px;border-radius:24px;flex:none;box-shadow:0 8px 24px rgba(11,31,40,.18)}
h1{font-weight:normal;font-size:2rem;margin:0 0 .25rem;letter-spacing:-.01em}
.sub{font-style:italic;color:var(--muted);margin:0}
h2{font-weight:normal;font-size:1.35rem;margin:2.5rem 0 .25rem}
.wave{display:block;height:8px;width:180px;margin:0 0 1rem}
p{margin:0 0 1rem}
a{color:var(--teal)}
dl{margin:0}
dt{font-weight:bold;margin-top:1rem}
dd{margin:0 0 .25rem 0;color:var(--ink)}
dd::before{content:"— ";color:var(--amber)}
ul.notes{padding-left:1.1rem}
ul.notes li{margin-bottom:.4rem}
ul.made{list-style:none;padding:0}
ul.made li{margin-bottom:.8rem}
ul.made small{display:block;color:var(--muted)}
footer{margin-top:4rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.75rem;color:var(--muted);border-top:1px solid #d8d0c0;padding-top:1rem}
canvas{display:block;width:100%;max-width:640px;height:auto;background:var(--deep);border-radius:12px;margin:0 auto 1rem;box-shadow:0 10px 30px rgba(11,31,40,.25)}
.controls{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;margin-bottom:1rem}
.controls label{display:flex;align-items:center;gap:.5rem}
input[type=range]{accent-color:var(--teal);width:180px}
button{font:inherit;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:6px;padding:.35rem .8rem;cursor:pointer}
button:hover,button:focus{background:var(--ink);color:var(--paper)}
.caption{font-style:italic;color:var(--muted);max-width:560px}