/* THE TRAIL'S END (lane/the-trails-end, Oct 31 2026): the tracenet page's sheet. Every colour here is a token of ../../harmony-accent.css, the one source
   of Harmony's night (his Oct 24 2026 lock: "Harmony's one palette is the dive's night plus her pink, lavender and gold") and of the snow day, its mirror,
   under html[data-theme="light"]; no literal colour in this file (tracenet-trail.test.mjs holds it). The type is the mint's (his Oct 25 00:5x "go for all
   them"): 'Bodoni 72' for the title and DM Sans for the words, both faces from ../../fonts/fonts.css; the three stacks below are warm.css's own names
   (--serif, --sans, --mono), repeated here because warm.css is the mint page's whole sheet and this page is not the mint. Motion only on a hand. */
:root{--tt-serif:'Bodoni 72','Didot','Times New Roman',serif;--tt-sans:'DM Sans',system-ui,sans-serif;--tt-mono:ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box}
[hidden]{display:none!important}
body.tt{margin:0;min-height:100svh;background:var(--harmony-sky);color:var(--harmony-text);font:400 16px/1.6 var(--tt-sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
button:disabled{cursor:default;opacity:.5}
button:focus-visible,a:focus-visible{outline:2px solid var(--harmony-go);outline-offset:4px}
.tt-skip{position:absolute;top:-90px;left:20px;z-index:9;background:var(--harmony-glass);color:var(--harmony-text);padding:14px;border:1px solid var(--harmony-line)}
.tt-skip:focus{top:10px}
.tt-top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:980px;margin:0 auto;padding:22px 24px 0}
.tt-brand{font-size:15px}
.tt-switch{display:flex;gap:2px;padding:2px;border:1px solid var(--harmony-line);border-radius:999px;background:var(--harmony-glass)}
.tt-switch button{border:0;border-radius:999px;padding:7px 16px;background:transparent;color:var(--harmony-quiet);font:500 12px/1 var(--tt-sans);letter-spacing:.04em}
.tt-switch button[aria-checked="true"]{background:var(--harmony-selected);color:var(--harmony-on-selected)}
.tt-main{max-width:980px;margin:0 auto;padding:44px 24px 60px}
.tt-eyebrow{margin:0 0 10px;color:var(--harmony-quiet);font:500 11px/1.4 var(--tt-mono);letter-spacing:.22em;text-transform:uppercase}
.tt-title{margin:0;font:italic 400 clamp(44px,8vw,86px)/1 var(--tt-serif);letter-spacing:-.01em;color:var(--harmony-text)}
.tt-line{margin:14px 0 36px;max-width:560px;color:var(--harmony-quiet);font-size:15px}
.tt-floor{position:relative;isolation:isolate;padding:16px 16px 22px;border:1px solid var(--harmony-line);border-radius:16px 16px 24px 24px;background:var(--harmony-glass);box-shadow:0 24px 70px var(--harmony-sky)}
.tt-keys{display:flex;flex-direction:column;gap:9px}
.tt-key-row{display:flex;gap:7px}
.tt-key{position:relative;flex:var(--w,1);min-width:0;height:50px;padding:6px 8px 9px;border:1px solid var(--harmony-line);border-radius:7px 7px 9px 9px;background:var(--harmony-sky);color:var(--harmony-text);box-shadow:0 4px 0 var(--harmony-line);font:500 11px/1 var(--tt-mono);letter-spacing:.08em;text-align:left;vertical-align:bottom;transition:transform .08s}
.tt-key:active,.tt-key.is-down{transform:translateY(3px);box-shadow:0 1px 0 var(--harmony-line)}
.tt-key[data-accent="teal"]{background:var(--harmony-go);color:var(--harmony-on-go);border-color:var(--harmony-selected);box-shadow:0 4px 0 var(--harmony-selected)}
.tt-key[data-accent="dark"]{background:var(--harmony-selected);color:var(--harmony-on-selected)}
.tt-key.tt-hers{box-shadow:0 0 0 2px var(--harmony-lavender),0 4px 0 var(--harmony-line)}
.tt-her{position:absolute;width:132px;height:132px;image-rendering:pixelated;pointer-events:none;z-index:2;filter:drop-shadow(0 10px 14px var(--harmony-sky))}
.tt-hint{margin:12px 0 44px;color:var(--harmony-quiet);font:400 12px/1.4 var(--tt-mono);letter-spacing:.06em}
.tt-drop{padding:26px 28px 24px;border:1px solid var(--harmony-line);border-radius:3px;background:var(--harmony-glass)}
.tt-drop h2{margin:0 0 10px;font:italic 400 clamp(24px,3.4vw,34px)/1.15 var(--tt-serif);color:var(--harmony-text)}
.tt-meta{margin:0 0 8px;color:var(--harmony-quiet);font:400 12px/1.5 var(--tt-mono);letter-spacing:.04em}
.tt-stamp{margin:0 0 18px;color:var(--harmony-lavender);font:400 12px/1.5 var(--tt-mono);letter-spacing:.04em;word-break:break-all}
.tt-act{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:14px}
.tt-act a,.tt-act button{display:inline-block;padding:12px 18px;border:1px solid var(--harmony-selected);border-radius:2px;background:var(--harmony-go);color:var(--harmony-on-go);font:500 13px/1.2 var(--tt-sans)}
.tt-act .tt-wait{color:var(--harmony-pink)}
.tt-act .tt-note{color:var(--harmony-quiet)}
.tt-status{margin:14px 0 0;color:var(--harmony-pink);font-size:13px}
.tt-foot{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:56px;padding-top:18px;border-top:1px solid var(--harmony-line);color:var(--harmony-quiet);font-size:12px}
.tt-foot button{border:0;padding:0;background:none;color:var(--harmony-quiet);text-decoration:underline;text-underline-offset:3px;font-size:12px}
@media(max-width:640px){.tt-key{height:38px;padding:4px 5px 6px;font-size:8px;border-radius:5px 5px 7px 7px}.tt-keys{gap:6px}.tt-key-row{gap:4px}.tt-her{width:84px;height:84px}.tt-main{padding:30px 16px 50px}.tt-top{padding:16px 16px 0}}
@media(prefers-reduced-motion:reduce){.tt-key{transition:none}}