/* Beyond the terminal: hobby pages, one shared frame. */

.hobby .pagehead{padding-bottom:0}
.hobby .pagehead + .sec{margin-top:2.2rem}
.hobby .pagehead .eyebrow a{border-bottom:1px solid transparent}
.hobby .pagehead .eyebrow a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.hobby .pagehead h1{max-width:20ch}
.hobby .pagehead .lead{max-width:44rem}

.hobby .sec{margin-top:clamp(2.5rem,5vw,3.75rem)}
.hobby .jump{top:var(--bar-h,52px)}
.hobby .jump-in{justify-content:center}
@media(max-width:960px){.hobby .jump-in{justify-content:flex-start}}

.hobby-nav{max-width:46rem;margin:clamp(3.5rem,6vw,5rem) auto 5rem;border-top:1px solid var(--hair);padding-top:2rem}
.hobby-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.hobby-link{display:flex;flex-direction:column;gap:.35rem;padding:1.25rem 1.4rem;background:var(--surface);border:1px solid var(--hair);border-radius:0;box-shadow:inset 0 1px 0 var(--spec,transparent),0 8px 24px -14px var(--shadow);transition:border-color .2s,translate .2s}
.hobby-link:hover{border-color:color-mix(in oklab,var(--accent) 42%,var(--line));translate:0 -2px}
.hobby-link span{font:600 1.15rem/1.25 var(--disp);letter-spacing:-.015em}
.hobby-link span::after{content:" \203A";color:var(--accent)}
.hobby-link small{color:var(--muted);font:400 .92rem/1.45 var(--body)}
.prose .hobby-link,.prose .hobby-link *{text-decoration:none}
.prose .hobby-link{color:var(--fg)}
.prose .hobby-link small{color:var(--muted)}
.prose .hobby-link:hover span{color:var(--accent)}
.about .hobby-links{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:1.2rem}
@media(max-width:620px){.about .hobby-links{grid-template-columns:1fr}}

/* hub */
.hobby-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:1rem 0 3rem}
.hobby-card{position:relative;display:flex;flex-direction:column;gap:.55rem;padding:1.5rem;background:var(--surface);border:1px solid var(--hair);border-radius:0;min-height:190px;transition:border-color .2s,translate .2s}
.hobby-card:hover{border-color:color-mix(in oklab,var(--accent) 42%,var(--line));translate:0 -2px}
.hobby-card h2{font-size:1.5rem}
.hobby-card p{margin:0;color:var(--muted);font-size:.96rem}
.hobby-card small{margin-top:auto;color:var(--accent);font:.78rem var(--mono);text-transform:uppercase;letter-spacing:.06em}
.hobby-no{font:600 .78rem var(--mono);color:var(--accent3);letter-spacing:.08em}
.hobby-intro{max-width:44rem}

/* shared toy shell */
.toy{max-width:56rem;margin:0 auto;background:var(--t-soft,var(--surface));border:1px solid var(--t-border,var(--hair));border-radius:0;overflow:hidden;box-shadow:inset 0 1px 0 var(--spec,transparent),0 14px 36px -20px var(--shadow)}
.toy-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 1.35rem;border-bottom:1px solid var(--hair);background:transparent}
.toy-head h2,.toy-head h3{margin:0;padding:0;border:0;font:600 1.15rem/1.25 var(--disp);letter-spacing:-.012em;color:var(--fg)}
.toy-head .toy-tag{padding:.25rem .7rem;border-radius:980px;background:var(--t-card,var(--surface2));border:1px solid var(--t-border,var(--hair));font:500 .75rem var(--body);color:var(--muted)}
.toy-body{padding:1.25rem 1.35rem}
.toy-stage{position:relative;background:var(--code);border:1px solid var(--hair);border-radius:0;overflow:hidden}
.toy-stage canvas{display:block;width:100%;height:auto;aspect-ratio:16/9}
.toy-controls{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-top:.9rem}
.toy-controls label{display:flex;align-items:center;gap:.5rem;font:.82rem var(--mono);color:var(--muted)}
.toy-btn{padding:.4rem .9rem;background:var(--t-card,var(--surface));color:var(--fg);border:1px solid var(--t-border,var(--line));border-radius:980px;font:500 .85rem var(--body);cursor:pointer;transition:.15s}
.toy-btn:hover{border-color:var(--accent);color:var(--accent)}
.toy-btn[aria-pressed="true"],.toy-btn.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.toy input[type="range"]{accent-color:var(--accent);max-width:180px}
.toy output,.toy .toy-read{font:.82rem var(--mono);color:var(--accent3)}
.toy-note{margin:.9rem 0 0;color:var(--muted);font:.85rem/1.6 var(--body)}
.toy-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.toy-fallback{margin:.9rem 0 0;color:var(--muted);font-size:.9rem}
.toy :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.toy-inner{max-width:52rem;margin:0 auto}
.toy-cap{margin:.9rem 0 0;color:var(--fg);font:.9rem/1.65 var(--body)}
.toy-cap code{font:.85em var(--mono);color:var(--accent2)}
.toy .toy-modes + .toy-modes{margin-top:.5rem}
.toy-controls output{font-variant-numeric:tabular-nums}
@media(max-width:620px){.toy-inner{max-width:none}}

.hobby .prose{max-width:46rem;margin-inline:auto}
.hobby .prose h2{margin-top:2.8rem}
.hobby .prose > h2:first-child{margin-top:0}
.hobby .prose figure{margin:2rem 0}
.hobby .prose figure img{display:block;width:100%;max-width:100%;height:auto;border-radius:0;border:1px solid var(--hair)}
.hobby .prose figcaption{margin-top:.65rem;font:.82rem/1.5 var(--body);color:var(--muted);text-align:center}
.hobby .prose .frames-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hobby .prose .frames-row img{width:100%;margin:0;border-radius:0;image-rendering:pixelated;box-shadow:none}
@media(max-width:560px){.hobby .prose .frames-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:620px){
  .toy-body{padding:.75rem}
  .toy-head{padding:.7rem .8rem}
}