/* "Benim İskelem" (#51). One paper sheet over the paused pond: the child on its pier at left (on top
   when narrow), the journey beside it, the three looks under that. Every state reads by shape and word:
   a solid frame and "Seçili", a thin frame and "Açık", a dashed frame, a faded swatch and "Kilitli · …". */
.header-actions{display:flex;gap:10px;align-items:center}
.profile-trigger{display:flex;gap:9px;align-items:center;min-height:44px;min-width:44px}
header .profile-trigger::first-letter{font-size:inherit}
/* The entry icon: the child's straw hat over a face, the shape the pond shows from above. */
.child-icon{position:relative;display:block;flex:none;width:22px;height:20px}
.child-icon::before{content:'';position:absolute;left:0;top:1px;width:22px;height:9px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)}
.child-icon::after{content:'';position:absolute;left:6px;top:9px;width:10px;height:10px;box-sizing:border-box;border:1.5px solid currentColor;border-radius:50%}
.dialog-actions{display:flex;gap:10px;align-items:center}.dialog-actions .profile-trigger{color:inherit;padding:0 14px;font-size:12px;border-radius:22px}

.profile-dialog{--paper:#eae6d9;--ink:#263e36;--muted:#5d6f63;--red:#a36336;width:min(940px,94vw);max-height:92dvh;overflow:auto;background:var(--paper);color:var(--ink);border:1px solid #9a9f8655;border-radius:8px;padding:24px 30px 14px;box-shadow:0 25px 90px #0007;overscroll-behavior:contain}
.profile-dialog::backdrop{background:#0a171cc4;backdrop-filter:blur(5px)}
.profile-dialog[open]{animation:profile-in .3s cubic-bezier(.2,.7,.2,1)}
@keyframes profile-in{from{opacity:0;translate:0 8px}}@keyframes profile-fade{from{opacity:0}}
.profile-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.profile-head .eyebrow{color:var(--red);letter-spacing:3px}
.profile-head h2{font:normal 34px/1.1 Georgia,serif;letter-spacing:-1px;margin:8px 0 0;overflow-wrap:anywhere}.profile-head h2:focus{outline:none}
.profile-close{flex:none;width:44px;height:44px;font-size:25px;border-radius:50%}
.profile-body{display:grid;grid-template-columns:minmax(240px,300px) 1fr;grid-template-areas:"me summary" "me looks";gap:6px 34px;margin-top:18px;align-items:start}
.profile-me{grid-area:me}.profile-summary{grid-area:summary;min-width:0}.profile-looks{grid-area:looks;min-width:0}
.profile-portrait{display:block;width:100%;height:auto;aspect-ratio:4/3;background:#163b38;border-radius:36px 36px 10px 10px;box-shadow:0 2px 0 #a0aa9355,0 10px 26px #243c3522}
.profile-name{margin-top:16px}.profile-name label{display:block;font:600 10px Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}.profile-name label small{font-weight:400;letter-spacing:.5px;text-transform:none;font-style:italic}
.profile-name>div{display:flex;gap:8px;margin-top:8px}
.profile-name input{flex:1;min-width:0;min-height:44px;padding:0 12px;font:16px Georgia,serif;color:var(--ink);background:#f7f3e8;border:1px solid #263a3744;border-radius:3px}
.profile-name input::placeholder{color:#7b8276;font-style:italic}.profile-name input:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.profile-name button{min-height:44px;padding:0 16px;font-size:13px}
.profile-dialog h3.eyebrow{margin:16px 0 8px;color:var(--muted)}
.profile-summary .profile-rank,.profile-counts{margin:0}
.profile-summary{display:grid;grid-template-columns:1fr auto;column-gap:20px}.profile-summary>h3,.profile-summary>ul{grid-column:1/-1}
.profile-rank .eyebrow{color:var(--muted)}.profile-rank strong{display:block;font:normal 27px/1.15 Georgia,serif;margin:6px 0 4px}
.profile-rank p{margin:0;font:13px/1.5 Arial,sans-serif}.profile-rank .profile-soon{font:italic 12px/1.5 Georgia,serif;color:var(--muted)}
.profile-counts{display:flex;gap:18px;align-self:start}.profile-counts dt{font:600 10px Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.profile-counts dd{margin:4px 0 0;font:30px/1 Georgia,serif;font-variant-numeric:tabular-nums}
/* Techniques: a small stone shape, solid when open and dashed when locked, and the word. */
.profile-techniques{list-style:none;padding:0;margin:0;display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.profile-techniques li{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:start;align-content:start;margin:0;font-size:12px}
.profile-techniques li::before{content:'';grid-row:1/3;width:15px;height:12px;margin-top:2px;box-sizing:border-box;border:1.5px solid var(--ink);border-radius:48% 58% 42% 46%;background:var(--ink)}
.profile-techniques li[data-kind=heavy]::before{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 3px #50665c}
.profile-techniques li[data-state=locked]::before{background:none;border-style:dashed;box-shadow:none}
.profile-techniques li>*{grid-column:2}.profile-techniques small{grid-row:2}
.profile-techniques b{font:13px/1.3 Georgia,serif;font-weight:normal}
.profile-techniques small{font:11px/1.35 Arial,sans-serif;color:var(--muted)}
/* Keepsake cards (#58): five in a row, three over two when the column is narrow. The card shows first;
   open has a solid edge and a red seal, locked is faded, hatched and dashed with its condition on it. */
.profile-mementos{container-type:inline-size;list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 8px}
.profile-mementos li{flex:0 0 calc((100% - 32px)/5);min-width:0;display:flex;flex-direction:column;gap:2px;margin:0;text-align:center}
@container (max-width:440px){.profile-mementos li{flex-basis:calc((100% - 16px)/3)}}
.memento-card{order:-1;position:relative;display:block;margin-bottom:6px}
.memento-card img{display:block;width:100%;height:auto;aspect-ratio:4/5}
/* The condition sits on the card's lower strip, on a paper slip so the hatching never runs through it. */
.memento-condition{position:absolute;left:9%;right:9%;bottom:5%;display:flex;align-items:center;justify-content:center;min-height:20%;padding:2px 3px;box-sizing:border-box;background:#f3ecd9e6;border-radius:2px;font:600 10.5px/1.2 Arial,sans-serif;color:var(--ink);text-wrap:balance}
.memento-condition:empty{display:none}
.profile-mementos b{font:13px/1.25 Georgia,serif;font-weight:normal}
.profile-mementos small{font:11px/1.35 Arial,sans-serif;color:var(--muted)}
.profile-mementos [data-state=open] small{color:var(--ink)}.profile-mementos [data-state=open] small::before{content:'✓ '}
/* The final badge, apart from the cards: a rosette beside its name and state. */
.profile-summary>.profile-badge{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid #263a3722}
.profile-badge img{flex:none;width:60px;height:70px}
.profile-badge>div{display:grid;gap:3px}.profile-badge .eyebrow{color:var(--muted);font-size:10px}
.profile-badge b{font:normal 17px/1.2 Georgia,serif}.profile-badge div>small:last-child{font:11px/1.35 Arial,sans-serif;color:var(--muted)}
.profile-badge[data-state=locked] b{color:#6d776c}.profile-badge[data-state=open] div>small:last-child{color:var(--ink)}.profile-badge[data-state=open] div>small:last-child::before{content:'✓ '}
[data-state=locked]>b{color:#6d776c}
/* Looks: tabs underline the shown one (and bold it), a single tab stop, arrows move between them. */
.profile-tabs{display:flex;gap:4px;border-bottom:1px solid #263a3726}
.profile-tab{min-height:44px;padding:0 14px;border:0;border-radius:3px 3px 0 0;font-size:13px;color:var(--muted);box-shadow:inset 0 -2px 0 transparent}
.profile-tab[aria-selected=true]{color:var(--ink);font-weight:600;box-shadow:inset 0 -3px 0 var(--ink)}
.profile-tab:focus-visible{outline-offset:-3px}
.look-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:8px;padding-top:12px}.look-grid[hidden]{display:none}
.look{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto 1fr;column-gap:9px;align-items:start;text-align:left;min-height:62px;padding:8px;border:1px solid #263a3733;background:#f3efe3}
.look:hover{background:#ece7d8}
.look-swatch{grid-row:1/3;position:relative;width:44px;height:44px;border:1.5px solid #263a3722;border-radius:6px;background:#e1dccb}
.look-name{font:13px/1.25 Georgia,serif;color:var(--ink)}
.look-state{font:italic 11px/1.35 Georgia,serif;color:var(--muted);margin-top:3px}
.look[data-state=selected]{border:2px solid var(--ink);padding:7px;background:#fbf8ef}
.look[data-state=selected] .look-state{font-style:normal;font-weight:600;color:var(--ink)}.look[data-state=selected] .look-state::before{content:'✓ '}
.look[data-state=locked]{border-style:dashed;background:transparent;cursor:not-allowed}.look[data-state=locked]:hover{background:transparent}
.look[data-state=locked] .look-swatch{border-style:dashed;border-color:#263a3766;background:repeating-linear-gradient(45deg,#263a3714 0 2px,transparent 2px 6px)}
.look[data-state=locked] .look-swatch::before,.look[data-state=locked] .look-swatch::after{filter:grayscale(1);opacity:.5}
.look[data-state=locked] .look-name{color:#6d776c}
/* Swatch shapes by slot: a straw hat with its mark, a little coat, a lantern with its pattern band. */
.look-swatch::before,.look-swatch::after{content:'';position:absolute}
[data-slot=hatMark]>.look-swatch::before{left:5px;top:12px;width:32px;height:16px;background:#c1a46c;clip-path:polygon(50% 0,100% 100%,0 100%)}
[data-slot=hatMark]>.look-swatch::after{left:15px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1.5px #3d3028}
[data-slot=hatMark][data-look=temel]>.look-swatch::after{display:none}
[data-slot=coat]>.look-swatch::before{left:6px;top:8px;width:30px;height:26px;background:var(--swatch);clip-path:polygon(30% 0,70% 0,100% 22%,88% 46%,76% 38%,76% 100%,24% 100%,24% 38%,12% 46%,0 22%)}
[data-slot=lantern]>.look-swatch::before{left:12px;top:8px;width:18px;height:26px;border-radius:5px 5px 4px 4px;border-top:3px solid #3d3028;box-sizing:border-box;background:linear-gradient(#f3d28b 0 30%,var(--swatch) 30% 62%,#f3d28b 62%)}
.profile-status{min-height:1.5em;margin:12px 0 0;font:italic 13px/1.5 Georgia,serif;color:var(--muted)}
@media(max-width:700px){
 .profile-dialog{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;border:0;padding:16px 18px 10px;margin:0}
 .profile-body{grid-template-columns:1fr;grid-template-areas:"me" "summary" "looks";gap:4px;margin-top:12px}
 .profile-head h2{font-size:28px}
 /* The close button stays in reach while the sheet scrolls: on a phone there is no Esc. */
 .profile-dialog{padding-top:0}.profile-head{position:sticky;top:0;z-index:2;background:var(--paper);padding:12px 0 8px;margin:0 -2px;box-shadow:0 1px 0 #263a3714}
 .profile-portrait{border-radius:28px 28px 8px 8px}
 .profile-name{margin-top:12px}.profile-summary{margin-top:6px}
 .profile-techniques{grid-template-columns:1fr}
 .profile-tabs{overflow-x:auto}.profile-tab{padding:0 10px;white-space:nowrap}
 .look-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dialog-actions .profile-trigger span{display:none}.dialog-actions .profile-trigger{padding:0;justify-content:center;border-radius:50%}
}
@media(max-width:560px){.header-actions{gap:6px}header .profile-trigger{padding:8px;justify-content:center}}
@media(prefers-reduced-motion:reduce){.profile-dialog[open]{animation:profile-fade .1s linear}}

/* The way back and the player's own numbers (#146). Quiet: paper and ink, no badge, no count that nags. */
.profile-finish{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.profile-finish[hidden]{display:none}
.profile-finish p{margin:0;font:italic 13px/1.5 Georgia,serif;color:var(--muted)}
.profile-finish button,.profile-data button{min-height:44px;min-width:44px;padding:0 16px;font-size:13px}
.profile-data{display:grid;gap:8px;justify-items:start;margin-bottom:6px}
.profile-data p{margin:0;font:13px/1.5 Arial,sans-serif}.profile-data .profile-privacy{font:italic 14px/1.4 Georgia,serif}
.profile-data textarea{width:100%;box-sizing:border-box;font:16px/1.4 ui-monospace,monospace;color:var(--ink);background:#f7f3e8;border:1px solid #263a3744;border-radius:3px;padding:8px}
.profile-data textarea:focus-visible{outline:2px solid var(--red);outline-offset:2px}.profile-data textarea[hidden]{display:none}

.profile-pouch{margin:0;font:14px/1.4 Georgia,serif;color:var(--muted)}.profile-pouch[hidden]{display:none}

/* Günün Göleti (#227): a plain draft door; the interface designer restyles it. */
.profile-daily{display:grid;gap:8px;justify-items:start}.profile-daily .eyebrow{margin:0}
.profile-daily-go{display:flex;gap:10px;align-items:center;min-height:44px;min-width:44px;padding:0 16px;font-size:13px}
.profile-daily-stars{color:var(--red);letter-spacing:.08em}
/* Usta göletleri (#245): the daily door's look; `display:grid` above would beat [hidden], so the closed gate says so itself. */
.profile-usta[hidden]{display:none}.profile-usta-about{margin:0;font-size:13px}

/* Save code, performance row and the lost-context note (#226). Same paper and ink; the row is two toggles, the
   pressed one filled, so the state reads without colour. */
.profile-data .profile-actions{display:flex;flex-wrap:wrap;gap:8px}
.profile-code-form{display:grid;gap:8px;width:100%;justify-items:start}.profile-code-form[hidden],.profile-code-form [hidden]{display:none}
.profile-code-form textarea{width:100%;box-sizing:border-box;font:16px/1.4 ui-monospace,monospace;color:var(--ink);background:#f7f3e8;border:1px solid #263a3744;border-radius:3px;padding:8px;word-break:break-all}
.profile-code-form textarea:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.profile-code-preview{font:600 14px/1.4 Georgia,serif!important}.profile-code-error{color:#8a3524;font:italic 13px/1.5 Georgia,serif!important}
.profile-perf-row{display:flex;flex-wrap:wrap;gap:8px}
.profile-perf-row button{min-height:44px;min-width:44px;padding:0 16px;font-size:13px}
.profile-perf-row button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.context-note{position:absolute;left:12px;right:12px;top:38%;z-index:7;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;padding:10px 14px;background:#10231fdd;color:#ede4c9;border:1px solid #d5ab6a55;border-radius:3px;text-align:center}
.context-note[hidden]{display:none}.context-note p{margin:0;font:italic 13px/1.5 Georgia,serif}.context-note button{min-height:44px;padding:0 16px;color:#ede4c9;border-color:#d5ab6a99;font-size:13px}.context-note button[hidden]{display:none}
/* Dilekler (#225): bitirilen bölümlerin dileği ve karşılığı; kapalı gelir, başlık sayıyı söyler. */
.profile-summary>.profile-wishes{grid-column:1/-1;margin:0}.profile-wishes[hidden]{display:none}
.profile-wishes>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:.4em;list-style:none}.profile-wishes>summary::-webkit-details-marker{display:none}
.profile-wishes>summary::before{content:'▸';margin-right:8px}.profile-wishes[open]>summary::before{content:'▾'}
.profile-wish-list{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:12px}
.profile-wish-list li{display:block;margin:0;padding-bottom:10px;border-bottom:1px solid #263a3722}
.profile-wish-list b{font:13px/1.3 Georgia,serif;font-weight:normal}
.profile-wish-list p{margin:3px 0 2px;font:14px/1.5 Georgia,serif}
.profile-wish-list small{font:italic 13px/1.5 Georgia,serif;color:var(--muted)}

/* Su Defteri (#243): eight pages, folded like the wishes. An open page is a little ink drawing over its sentence;
   a closed one is a faint dashed sheet with a "?" and says nothing else. Shape and words carry the state, never colour. */
.profile-summary>.profile-notebook{grid-column:1/-1;margin:0}
.profile-notebook>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:.4em;list-style:none;color:var(--muted)}.profile-notebook>summary::-webkit-details-marker{display:none}
.profile-notebook>summary::before{content:'▸';margin-right:8px}.profile-notebook[open]>summary::before{content:'▾'}
.profile-notebook>summary:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
/* The moonlit pond (03) lights every `.eyebrow` and `li p` on the page; the sheet keeps its own paper ink (the wishes' summary too). */
.profile-dialog .profile-notebook>summary.eyebrow,.profile-dialog .profile-wishes>summary.eyebrow{color:var(--muted)}.profile-dialog .profile-wish-list p{color:var(--ink)}
.nb-list{list-style:none;padding:0;margin:0 0 8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.nb-page{display:grid;grid-template-rows:auto 1fr;gap:6px;margin:0;padding:8px 8px 10px;min-height:44px;background:#f7f3e8;border:1px solid #263a3733;border-radius:3px;color:var(--ink)}
.nb-page .nb-art{display:block;width:100%;height:auto;aspect-ratio:96/60;background:#fbf8ef;border-radius:2px}
.nb-art .i{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.nb-art .f{fill:currentColor;stroke:none}
.nb-art .r{stroke:var(--red)}.nb-art .m{opacity:.45}.nb-art .d{stroke-dasharray:3 3}
.nb-art .l{fill:var(--paper);stroke:var(--red);stroke-width:1.6}
/* style.css styles every `li>span` (grey, 12px); the page's own spans say their colour and padding again. */
.nb-text{display:grid;gap:2px;align-content:start;padding:0;color:var(--ink);font:13px/1.3 Georgia,serif}.nb-text b{font:13px/1.3 Georgia,serif;font-weight:600}.profile-dialog .nb-text p{margin:0;font:italic 13px/1.45 Georgia,serif;color:var(--muted)}
.nb-page[data-state=closed]{background:transparent;border-style:dashed;border-color:#263a3744;grid-template-rows:1fr;place-items:center;min-height:96px}
.nb-mark{padding:0;font:30px/1 Georgia,serif;color:var(--muted);opacity:.5}
@media(max-width:700px){.nb-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Seviye ve hesap (#299): the level bar always, the account rows only when the Open Play link is on. */
.profile-summary>.profile-account{grid-column:1/-1;justify-items:stretch}.profile-account .profile-actions{justify-content:flex-start}
.profile-xp{display:grid;gap:6px}.profile-xp strong{font:normal 27px/1.15 Georgia,serif}.profile-xp p{font:13px/1.5 Arial,sans-serif;color:var(--muted)}
.profile-xp progress{appearance:none;-webkit-appearance:none;width:100%;height:10px;border:0;border-radius:5px;overflow:hidden;background:#263a3722;color:var(--red)}
.profile-xp progress::-webkit-progress-bar{background:#263a3722}.profile-xp progress::-webkit-progress-value{background:var(--red);border-radius:5px}.profile-xp progress::-moz-progress-bar{background:var(--red);border-radius:5px}
.profile-account .profile-note{font:italic 13px/1.5 Georgia,serif;color:var(--muted)}.profile-account .profile-cloud{color:var(--muted)}
.profile-account [hidden]{display:none}
.profile-share label{display:flex;align-items:center;gap:10px;min-height:44px;font:14px Arial,sans-serif;cursor:pointer}.profile-share input{width:22px;height:22px;accent-color:var(--ink)}
.profile-share input:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.profile-reload{display:grid;gap:8px;justify-items:start;padding:10px 12px;border:1px solid #a3633655;border-radius:4px;background:#f7f3e8}
/* Uzak kıyı ve dünya kandilleri (#271): five lights per world, filled when the level is done and an outline when not (shape, not colour); the profile lists
   the five worlds, the level cards show their own world's five in the head. The words (a count) are beside it, so the row itself is skipped by a reader. */
.profile-shore{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:4px;max-width:340px}
/* style.css gives every `li` a bottom margin and every `li>span` its grey 12 px: the shore line says its own. */
.profile-shore li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px;margin:0;font:14px Georgia,serif}
.profile-shore li>span{padding:0;font:inherit;color:var(--ink)}.profile-shore li>.lantern-row{color:var(--muted)}
.lantern-row{display:inline-flex;align-items:flex-end;gap:7px;vertical-align:middle}
.lantern{position:relative;display:block;width:10px;height:13px;box-sizing:border-box;border:1.5px solid currentColor;border-radius:3px 3px 5px 5px;opacity:.7}
.lantern::before{content:'';position:absolute;left:50%;top:-4px;width:1.5px;height:3px;background:currentColor;translate:-50% 0}
.lantern.on{background:#d9a441;border-color:#a36336;opacity:1;box-shadow:0 0 6px #e8b85a88}
.map-world-head .lantern-row{margin-left:12px;padding-top:4px}

/* Su izi (#272): the month calendar under the daily door. A day played carries a lit lantern (the same lantern as the world rows), a day not
   played is an empty cell: no red, no fade, no mark for "missed". A day with a pond in the packs has a thin box (shape, not colour) and opens it;
   today's box is heavier. Days after today (and days before any pond) are plain numbers. Nothing here moves, so reduced motion has nothing to cut. */
.profile-summary>.profile-trail{grid-column:1/-1;display:grid;gap:6px;max-width:360px;width:100%;margin-bottom:6px}
.profile-trail>.eyebrow{margin:16px 0 2px}
.trail-nav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.trail-month{font:17px/1.2 Georgia,serif;color:var(--ink)}
.trail-step{width:44px;height:44px;padding:0;font:22px/1 Georgia,serif}
.trail-step[aria-disabled=true]{opacity:.3;cursor:default}.trail-step[aria-disabled=true]:hover{background:transparent}
.trail-grid{display:grid;gap:2px}.trail-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.trail-wd{text-align:center;font:600 10px/24px Arial,sans-serif;letter-spacing:.4px;color:var(--muted)}
.trail-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0;border:1px solid transparent;border-radius:3px;font:13px/1 Georgia,serif;color:var(--ink);font-variant-numeric:tabular-nums}
.trail-day[data-door]{border-color:#263a3744}
.trail-day[data-today]{border:2px solid var(--ink)}
.trail-day[aria-disabled=true]{cursor:default;color:var(--muted)}.trail-day[aria-disabled=true]:hover{background:transparent}
.trail-day:focus-visible{outline:2px solid var(--red);outline-offset:-3px}
.trail-lamp{display:block;height:15px}.trail-lamp .lantern{width:11px;height:14px;margin:0 auto}
.trail-say{min-height:1.5em;margin:0;font:italic 13px/1.5 Georgia,serif;color:var(--muted)}
.trail-hint{margin:0;font:italic 12px/1.4 Georgia,serif;color:var(--muted)}