/* ── INTERACTION STATES ── pressed, touch targets, disabled, invalid, back-to-top */
.theme-button{width:2.75rem;height:2.75rem}
.player-controls button{width:2.75rem;height:2.75rem}
.button,.theme-button,.skill-categories button,.player-controls button,.playlist button,.totop,.link-button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.button:active,.theme-button:active,.skill-categories button:active,.player-controls button:active,.totop:active{transform:scale(.95)}
.playlist button:active{background:var(--line)}
.theme-button.is-spinning svg{animation:spin .6s cubic-bezier(.2,.8,.2,1)}
.project-lines li{cursor:pointer;border-radius:4px}
.project-lines li:hover{translate:3px 0}
.project-lines li:hover::before{background:var(--accent);width:1rem}

.photo:focus-visible{outline-offset:6px}
.skill-loadout li{cursor:pointer}
.skill-loadout li:active{transform:scale(.95)}
.ticker.is-held .ticker-item{animation-play-state:paused}
.form-field.is-invalid input,.form-field.is-invalid textarea{border-color:var(--accent-text)}
.form-error{color:var(--accent-text);font-size:.88rem;margin:0}
.form-error[hidden]{display:none}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem}
.link-button{background:none;border:0;padding:.6rem .2rem;cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);text-decoration:underline;text-underline-offset:3px}
.link-button:hover{color:var(--ink)}
.totop{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:40;width:2.9rem;height:2.9rem;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;cursor:pointer;opacity:0;translate:0 14px;pointer-events:none;visibility:hidden;transition:opacity .3s,translate .3s,visibility .3s,transform .15s}
.totop.is-shown{opacity:1;translate:0 0;pointer-events:auto;visibility:visible}
.totop svg{width:1.1rem;height:1.1rem}
@media (hover:none){.note:hover{transform:rotate(var(--r,0deg));box-shadow:5px 6px 0 var(--ink)}.skill-chips li:hover{transform:none;box-shadow:2px 3px 0 var(--ink);background:var(--paper)}.skill-loadout li:hover{transform:none}}