/* The original lesson, widget and account styles, scoped to .legacy so they cannot leak into the new app.
   Generated once from the old css/style.css; edit by hand from here on. */
.legacy [hidden]{display: none !important;}
.legacy img, .legacy svg{max-width: 100%;}
.legacy a{color: var(--jade); text-underline-offset: 0.18em; text-decoration-thickness: 1px;}
.legacy a:hover{text-decoration-thickness: 2px;}
.legacy :focus-visible{outline: 2px solid var(--jade); outline-offset: 3px; border-radius: 4px;}
.legacy button{font: inherit; color: inherit;}
.legacy h1, .legacy h2, .legacy h3, .legacy h4{text-wrap: balance; margin: 0;}
.legacy p{margin: 0;}
.legacy .zh{font-family: var(--f-zh); font-weight: 400; letter-spacing: 0.02em;}
.legacy .py{font-family: var(--f-display); font-style: italic; color: var(--ink-2);}
.legacy .brush{font-family: var(--f-brush); font-weight: 400; line-height: 1;}
.legacy .term{white-space: normal;}
.legacy .term .zh{color: var(--ink);}
.legacy .term .py{font-size: 0.95em;}
.legacy .eyebrow{font: 700 0.75rem/1.2 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);}
.legacy .muted{color: var(--ink-3);}
.legacy .wrap{max-width: 1200px; margin: 0 auto;}
.legacy .btn{display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: background .15s, border-color .15s, transform .15s;}
.legacy .btn:hover{border-color: var(--ink-3);}
.legacy .btn:active{transform: translateY(1px);}
.legacy .btn.primary{background: var(--jade); border-color: var(--jade); color: var(--jade-ink);}
.legacy .btn.primary:hover{filter: brightness(1.06);}
.legacy .btn.small{padding: 7px 13px; font-size: 0.85rem;}
.legacy .btn.ghost{background: transparent;}
.legacy .btn[aria-pressed="true"]{background: var(--jade-2); border-color: var(--jade); color: var(--ink);}
.legacy .btn svg{width: 16px; height: 16px; flex: none;}
.legacy .stage{display: grid; gap: 10px;}
.legacy .plate{position: relative; border-radius: 14px; overflow: hidden; touch-action: pan-y; background: radial-gradient(120% 90% at 50% 35%, color-mix(in srgb, var(--surface) 70%, var(--surface-2)) 0%, var(--surface-2) 70%); border: 1px solid var(--line-2); cursor: grab; user-select: none; -webkit-user-select: none;}
.legacy .plate.dragging{cursor: grabbing;}
.legacy .plate svg.fg{display: block; width: 100%; height: auto; aspect-ratio: 240 / 250;}
.legacy .plate .watermark{position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font: 400 clamp(8rem, 26vw, 15rem)/1 var(--f-brush); color: var(--ink); opacity: 0.05;}
.legacy .fg-near{fill: var(--ink);}
.legacy .fg-far{fill: var(--ink-far);}
.legacy .fg-edge{stroke: var(--surface-2); stroke-width: 1.4; paint-order: stroke;}
.legacy .fg-near[data-stroke]{stroke: var(--ink);}
.legacy .fg-far[data-stroke]{stroke: var(--ink-far);}
.legacy .fg-out{fill: var(--surface-2); stroke: var(--surface-2);}
.legacy .fg-ground{fill: var(--fg-ground);}
.legacy .fg-front{fill: var(--ink-3);}
.legacy .fg-shadow{fill: var(--fg-shadow);}
.legacy .fg-face{fill: var(--surface-2); opacity: 0.32;}
.legacy .fg-dt, .legacy .fg-dt-glow{fill: var(--cinnabar);}
.legacy .fg-plumb{stroke: var(--jade); stroke-width: 1; stroke-dasharray: 3 3; fill: none;}
.legacy .fg-mark{fill: var(--jade); stroke: var(--surface-2); stroke-width: 1.5;}
.legacy .fg-mark.on{fill: var(--cinnabar);}
.legacy .fg-mark-ring{fill: none; stroke: var(--cinnabar); stroke-width: 1.2;}
.legacy .fg-orbit{fill: none; stroke: var(--jade); stroke-width: 2.2; stroke-dasharray: 3 3;}
.legacy .fg-orbit-dot{fill: var(--cinnabar);}
.legacy .breath{position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px; font: 700 0.72rem/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); padding: 6px 10px 6px 8px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); opacity: 0; transition: opacity .3s;}
.legacy .stage.has-breath .breath{opacity: 1;}
.legacy .breath i{width: 10px; height: 10px; border-radius: 50%; background: var(--cinnabar); transform: scale(var(--b, .6)); transition: transform .2s;}
.legacy .drag-hint{position: absolute; right: 12px; bottom: 10px; font-size: 0.72rem; color: var(--ink-3); pointer-events: none;}
.legacy .stage-cap{font-size: 0.95rem; color: var(--ink-2); min-height: 1.65em;}
.legacy .stage-cap b{color: var(--ink); font-weight: 700;}
.legacy .ctrl{display: flex; flex-wrap: wrap; gap: 8px; align-items: center;}
.legacy .icon-btn{display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink);}
.legacy .icon-btn.play{background: var(--ink); border-color: var(--ink); color: var(--bg); width: 44px; height: 44px;}
.legacy .icon-btn svg{width: 18px; height: 18px;}
.legacy .seg{display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface);}
.legacy .seg button{border: 0; background: none; padding: 8px 11px; font-size: 0.8rem; font-weight: 700; color: var(--ink-2); cursor: pointer;}
.legacy .seg button + button{border-left: 1px solid var(--line-2);}
.legacy .seg button[aria-pressed="true"]{background: var(--jade-2); color: var(--ink);}
.legacy .stage.compact .ctrl .seg.view, .legacy .stage.compact .ctrl .mirror{display: none;}
.legacy .hero{display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: clamp(28px, 6vw, 72px) clamp(24px, 4vw, 48px);}
.legacy .hero h1{font: 300 clamp(2.5rem, 5.6vw, 4.4rem)/1.04 var(--f-display); letter-spacing: -0.015em; margin: 14px 0 20px;}
.legacy .hero h1 em{font-style: italic; color: var(--jade);}
.legacy .hero .lede{font-size: 1.15rem; color: var(--ink-2); max-width: 34rem;}
.legacy .cta{display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px;}
.legacy .continue{margin-top: 22px; font-size: 0.95rem; color: var(--ink-2);}
.legacy .hero-stage{max-width: 470px; width: 100%; justify-self: center;}
@media (max-width: 860px){
.legacy .hero{grid-template-columns: 1fr;}
.legacy .hero-stage{max-width: 380px;}
}
.legacy .section{padding-block: clamp(28px, 5vw, 56px); border-top: 1px solid var(--line-2);}
.legacy .section-head{display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px;}
.legacy .section-head h2{font: 400 clamp(1.6rem, 3vw, 2.1rem)/1.15 var(--f-display);}
.legacy .stages-row{display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative;}
.legacy .stages-row::before{content: ""; position: absolute; left: 0; right: 0; top: 44px; height: 1px; background: var(--line);}
.legacy .stage-tile{position: relative; padding: 0 16px 0 0; text-decoration: none; color: var(--ink); display: grid; gap: 8px; align-content: start;}
.legacy .stage-tile .glyph{width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); font-size: 3rem; position: relative; transition: border-color .2s, background .2s;}
.legacy .stage-tile:hover .glyph{border-color: var(--jade); background: var(--surface);}
.legacy .stage-tile .n{font: 700 0.72rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px;}
.legacy .stage-tile h3{font: 400 1.35rem/1.2 var(--f-display);}
.legacy .stage-tile p{font-size: 0.9rem; color: var(--ink-2);}
.legacy .meter{height: 4px; border-radius: 4px; background: var(--line-2); overflow: hidden; margin-top: 4px;}
.legacy .meter i{display: block; height: 100%; background: var(--jade); width: var(--p, 0%);}
.legacy .stage-tile .count{font-size: 0.8rem; color: var(--ink-3); font-variant-numeric: tabular-nums;}
@media (max-width: 900px){
.legacy .stages-row{grid-template-columns: 1fr; gap: 18px;}
.legacy .stages-row::before{left: 32px; right: auto; top: 0; bottom: 0; width: 1px; height: auto;}
.legacy .stage-tile{grid-template-columns: 64px 1fr; column-gap: 16px; padding: 0;}
.legacy .stage-tile .glyph{width: 64px; height: 64px; font-size: 2.2rem; grid-row: span 5;}
}
.legacy .triad{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 36px);}
.legacy .triad > div{display: grid; gap: 8px; align-content: start;}
.legacy .triad .brush{font-size: 2.6rem; color: var(--jade);}
.legacy .triad h3{font: 400 1.3rem/1.2 var(--f-display);}
.legacy .triad p{color: var(--ink-2); font-size: 0.98rem;}
@media (max-width: 720px){
.legacy .triad{grid-template-columns: 1fr;}
}
.legacy .routine-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px;}
.legacy .routine-grid.four{grid-template-columns: repeat(4, minmax(0, 1fr));}
@media (max-width: 900px){
.legacy .routine-grid.four{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
.legacy .routine{text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; cursor: pointer; display: grid; gap: 6px; align-content: start; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s;}
.legacy .routine:hover{border-color: var(--ink-3); box-shadow: var(--shadow);}
.legacy .routine[aria-pressed="true"]{border-color: var(--jade); box-shadow: 0 0 0 1px var(--jade);}
.legacy .routine .mins{font: 400 1.9rem/1 var(--f-display); font-variant-numeric: tabular-nums;}
.legacy .routine .mins small{font: 700 0.72rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-left: 4px;}
.legacy .routine h3{font: 700 1rem/1.3 var(--f-body);}
.legacy .routine p{font-size: 0.88rem; color: var(--ink-2);}
.legacy .page-head{padding-block: clamp(28px, 5vw, 56px) 8px; max-width: 46rem;}
.legacy .page-head h1{font: 300 clamp(2.2rem, 4.5vw, 3.4rem)/1.08 var(--f-display); margin: 10px 0 14px; letter-spacing: -0.01em;}
.legacy .page-head p{color: var(--ink-2); font-size: 1.08rem;}
.legacy .path{position: relative; margin-top: 28px; display: grid; gap: 8px;}
.legacy .path-stage{display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 28px; position: relative; padding-bottom: 36px;}
.legacy .path-stage::before{content: ""; position: absolute; left: 47px; top: 96px; bottom: 0; width: 1px; background: var(--line);}
.legacy .path-stage:last-child::before{display: none;}
.legacy .path-glyph{width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 3.4rem; background: var(--surface); border: 1px solid var(--line);}
.legacy .path-stage header{padding-top: 14px; margin-bottom: 14px;}
.legacy .path-stage h2{font: 400 1.9rem/1.15 var(--f-display); margin-top: 4px;}
.legacy .path-stage header p{color: var(--ink-2); max-width: 40rem; margin-top: 6px;}
.legacy .lesson-list{list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); max-width: 46rem;}
.legacy .lesson-list li{border-bottom: 1px solid var(--line-2);}
.legacy .lesson-list a{display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto 26px; gap: 12px; align-items: center; padding: 12px 4px; color: var(--ink); text-decoration: none;}
.legacy .lesson-list a:hover{background: color-mix(in srgb, var(--surface) 70%, transparent);}
.legacy .lesson-list .ln{font: 400 0.95rem/1 var(--f-display); color: var(--ink-3); font-variant-numeric: tabular-nums;}
.legacy .lesson-list .lt{display: grid; gap: 2px;}
.legacy .lesson-list .lt b{font-weight: 700;}
.legacy .lesson-list .lt .zh{font-size: 0.85rem; color: var(--ink-3);}
.legacy .lesson-list .lm{font-size: 0.82rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums;}
.legacy .check{width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center;}
.legacy .check.on{background: var(--jade); border-color: var(--jade); color: var(--jade-ink);}
.legacy .check svg{width: 13px; height: 13px;}
@media (max-width: 640px){
.legacy .path-stage{grid-template-columns: 1fr;}
.legacy .path-stage::before{display: none;}
.legacy .path-glyph{width: 64px; height: 64px; font-size: 2.3rem;}
.legacy .lesson-list a{grid-template-columns: 2.4rem minmax(0, 1fr) 24px;}
.legacy .lesson-list .lm{display: none;}
}
.legacy .lesson-grid{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40rem) minmax(0, 1fr); gap: 0 clamp(20px, 3vw, 48px);}
.legacy .lesson-grid > *{grid-column: 2;}
.legacy .lesson-grid > .wide{grid-column: 1 / -1;}
.legacy .lesson-mark{grid-column: 1; grid-row: 1; justify-self: end; align-self: start; margin-top: 44px; font-size: 7rem; color: var(--ink); opacity: 0.85;}
.legacy .toc{grid-column: 3; grid-row: 2; position: sticky; top: calc(var(--top-h) + 30px); align-self: start; font-size: 0.88rem; max-width: 15rem; margin-top: 8px;}
.legacy .toc ol{list-style: none; padding: 0; margin: 8px 0 0; border-left: 1px solid var(--line);}
.legacy .toc a{display: block; padding: 5px 0 5px 14px; color: var(--ink-2); text-decoration: none; margin-left: -1px; border-left: 2px solid transparent;}
.legacy .toc a:hover{color: var(--ink);}
.legacy .toc a.on{color: var(--ink); border-left-color: var(--jade);}
@media (max-width: 1180px){
.legacy .toc{display: none;}
.legacy .lesson-grid{grid-template-columns: minmax(0, 1fr) minmax(0, 40rem) minmax(0, 0.4fr);}
}
@media (max-width: 900px){
.legacy .lesson-mark{display: none;}
.legacy .lesson-grid{grid-template-columns: minmax(0, 1fr);}
.legacy .lesson-grid > *{grid-column: 1;}
}
.legacy .lesson-head{padding-block: clamp(28px, 5vw, 56px) 20px;}
.legacy .crumb{font: 700 0.75rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); text-decoration: none;}
.legacy .crumb:hover{color: var(--jade);}
.legacy .lesson-head h1{font: 300 clamp(2.1rem, 4.4vw, 3.2rem)/1.08 var(--f-display); letter-spacing: -0.01em; margin: 12px 0 10px;}
.legacy .lesson-head .lz{font-size: 1.1rem;}
.legacy .lesson-head .lz .zh{font-size: 1.15rem; margin-right: 8px;}
.legacy .lesson-head .lead{font-size: 1.2rem; line-height: 1.55; color: var(--ink-2); margin-top: 18px;}
.legacy .lesson-head .meta{margin-top: 14px; font-size: 0.85rem; color: var(--ink-3); display: flex; gap: 14px; flex-wrap: wrap; font-variant-numeric: tabular-nums;}
.legacy .prose{padding-bottom: 12px;}
.legacy .prose > * + *{margin-top: 1.05em;}
.legacy .prose h2{font: 400 1.65rem/1.2 var(--f-display); margin-top: 2em;}
.legacy .prose h3{font: 700 1.08rem/1.35 var(--f-body); margin-top: 1.6em;}
.legacy .prose ul, .legacy .prose ol{padding-left: 1.3em;}
.legacy .prose li + li{margin-top: 0.45em;}
.legacy .prose li::marker{color: var(--ink-3);}
.legacy .prose strong{font-weight: 700;}
.legacy .prose em{font-style: italic;}
.legacy .prose table{width: 100%; border-collapse: collapse; font-size: 0.95rem;}
.legacy .table-wrap{overflow-x: auto;}
.legacy .prose th{text-align: left; font: 700 0.75rem/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line);}
.legacy .prose td{padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-2); vertical-align: top;}
.legacy .prose dl.treasures{display: grid; gap: 0; border-top: 1px solid var(--line-2);}
.legacy .prose dl.treasures > div{display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--line-2);}
.legacy .prose dl.treasures dt{font-weight: 700;}
.legacy .prose dl.treasures dt .term{display: block; font-weight: 400; margin-top: 2px;}
.legacy .prose dl.treasures dd{margin: 0; color: var(--ink-2);}
@media (max-width: 600px){
.legacy .prose dl.treasures > div{grid-template-columns: 1fr;}
}
.legacy aside.note, .legacy aside.caution{border-radius: var(--radius); padding: 14px 18px; font-size: 0.97rem; background: var(--surface); border: 1px solid var(--line-2);}
.legacy aside.caution{background: color-mix(in srgb, var(--cinnabar) 7%, var(--surface)); border-color: color-mix(in srgb, var(--cinnabar) 30%, var(--line-2));}
.legacy aside.caution strong{color: var(--cinnabar);}
.legacy blockquote.classic{margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--jade);}
.legacy blockquote.classic .zh{font-size: 1.25rem; line-height: 1.6; color: var(--ink);}
.legacy blockquote.classic p:not(.zh){font: 400 1.12rem/1.5 var(--f-display); font-style: italic; color: var(--ink-2); margin-top: 6px;}
.legacy blockquote.classic cite{display: block; margin-top: 6px; font: 700 0.72rem/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-style: normal;}
.legacy .classics .gloss{color: var(--ink-2); margin-top: -0.6em;}
.legacy .try{margin-top: 2em; padding: clamp(16px, 3vw, 26px); border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2);}
.legacy .try > * + *{margin-top: 0.9em;}
.legacy .try h3{margin-top: 0; font: 400 1.35rem/1.2 var(--f-display);}
.legacy .try .fig-embed{margin: 0.4em 0 1em;}
.legacy .fig-embed{margin: 1.4em 0; display: grid; gap: 8px;}
.legacy .fig-embed .stage{max-width: 360px;}
.legacy .fig-embed figcaption{font-size: 0.9rem; color: var(--ink-3); max-width: 36rem;}
.legacy .styles li strong{font-family: var(--f-display); font-size: 1.1rem; font-weight: 500;}
.legacy .steps-plain > li{padding-left: 4px;}
.legacy ol.checklist{list-style: none; padding: 0; counter-reset: c;}
.legacy ol.checklist li{counter-increment: c; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); padding: 8px 0; border-bottom: 1px solid var(--line-2); margin: 0;}
.legacy ol.checklist li::before{content: counter(c, decimal-leading-zero); font: 400 0.95rem/1.7 var(--f-display); color: var(--ink-3); font-variant-numeric: tabular-nums;}
.legacy ol.essentials{list-style: none; padding: 0; counter-reset: e; display: grid; gap: 0;}
.legacy ol.essentials li{counter-increment: e; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 2px 8px; padding: 18px 0; border-bottom: 1px solid var(--line-2); margin: 0;}
.legacy ol.essentials li::before{content: counter(e); grid-row: span 3; font: 300 2rem/1 var(--f-display); color: var(--jade);}
.legacy ol.essentials h3{margin: 0; font: 400 1.1rem/1.4 var(--f-body);}
.legacy ol.essentials h3 .zh{font-size: 1.25rem;}
.legacy ol.essentials .en{font: 400 1.15rem/1.4 var(--f-display); font-style: italic;}
.legacy ol.essentials p:not(.en){color: var(--ink-2);}
.legacy ol.session-shape{list-style: none; padding: 0; counter-reset: s;}
.legacy ol.session-shape li{counter-increment: s; position: relative; padding: 10px 0 10px 3rem; border-bottom: 1px solid var(--line-2); margin: 0; color: var(--ink-2);}
.legacy ol.session-shape li strong{color: var(--ink);}
.legacy ol.session-shape li::before{content: counter(s); position: absolute; left: 0; top: 10px; font: 300 1.6rem/1 var(--f-display); color: var(--jade);}
.legacy .stance-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 28px 24px; margin-top: 1.4em;}
.legacy .stance h3{margin-top: 10px !important; font: 400 1.25rem/1.25 var(--f-display) !important;}
.legacy .stance h3 .term{display: block; font-size: 0.95rem; margin-top: 2px;}
.legacy .stance p{font-size: 0.95rem; color: var(--ink-2); margin-top: 6px;}
.legacy .stance .fig-embed{margin: 0;}
.legacy .stance figcaption{display: none;}
.legacy .hand-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 20px 28px;}
.legacy .hand-grid h3{margin: 0 0 6px !important; font: 400 1.25rem/1.25 var(--f-display) !important;}
.legacy .hand-grid p{font-size: 0.95rem; color: var(--ink-2);}
.legacy .hand-grid p + p{margin-top: 0.6em;}
.legacy .lesson-foot{margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 22px;}
.legacy .learned{display: flex; align-items: center; gap: 14px; flex-wrap: wrap;}
.legacy .pn{display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.legacy .pn a{display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); background: var(--surface);}
.legacy .pn a:hover{border-color: var(--ink-3);}
.legacy .pn a.next{text-align: right;}
.legacy .pn small{font: 700 0.72rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);}
.legacy .pn span{font: 400 1.1rem/1.3 var(--f-display);}
@media (max-width: 560px){
.legacy .pn{grid-template-columns: 1fr;}
.legacy .pn a.next{text-align: left;}
}
.legacy .set{margin-top: 36px;}
.legacy .set-head{display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line);}
.legacy .set-head h2{font: 400 1.8rem/1.2 var(--f-display);}
.legacy .set-head .whole{margin-left: auto;}
.legacy .set-grid{display: grid; grid-template-columns: minmax(0, 40rem) minmax(260px, 24rem); gap: clamp(20px, 3.5vw, 48px); justify-content: center; margin-top: 8px;}
.legacy .set-grid.single{grid-template-columns: minmax(0, 40rem);}
.legacy .set-stage{position: sticky; top: calc(var(--top-h) + 20px); align-self: start; padding-top: 22px;}
.legacy .set-stage .now{font: 700 0.72rem/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;}
.legacy .set-stage .now b{display: block; font: 400 1.25rem/1.25 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--ink); margin-top: 4px;}
.legacy .part-head{padding: 28px 0 4px; font: 700 0.75rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--jade);}
.legacy .move{padding: 26px 0; border-bottom: 1px solid var(--line-2); display: grid; gap: 14px; scroll-margin-top: calc(var(--top-h) + 20px);}
.legacy .move-top{display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 10px;}
.legacy .move-num{font: 300 2.2rem/1 var(--f-display); color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 2px;}
.legacy .move.on .move-num{color: var(--jade);}
.legacy .move h3{font: 400 1.45rem/1.2 var(--f-display);}
.legacy .move .mz{margin-top: 4px;}
.legacy .move .mz .zh{font-size: 1.05rem; margin-right: 6px;}
.legacy .move .gloss{font-size: 0.9rem; color: var(--ink-3); margin-top: 2px; font-style: italic;}
.legacy .move-meta{display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.9rem; margin: 0; padding-left: calc(3rem + 10px);}
.legacy .move-meta div{display: flex; gap: 6px;}
.legacy .move-meta dt{color: var(--ink-3);}
.legacy .move-meta dd{margin: 0; color: var(--ink);}
.legacy .move-body{padding-left: calc(3rem + 10px); display: grid; gap: 14px;}
.legacy .move-steps{margin: 0; padding-left: 1.2em; display: grid; gap: 6px;}
.legacy .move-steps li{padding: 2px 6px; margin-left: -6px; border-radius: 6px; transition: background .25s;}
.legacy .move-steps li::marker{color: var(--ink-3); font-variant-numeric: tabular-nums;}
.legacy .move-steps li.on{background: var(--jade-2);}
.legacy .move-body h4{font: 700 0.72rem/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;}
.legacy .move-body ul{margin: 0; padding-left: 1.2em; color: var(--ink-2); font-size: 0.97rem;}
.legacy .move-body ul li + li{margin-top: 4px;}
.legacy .move-why{font-size: 0.95rem; color: var(--ink-2);}
.legacy .move-avoid ul li::marker{color: var(--cinnabar);}
.legacy .move .watch{justify-self: start;}
.legacy .move-body .fig-embed{margin: 0;}
.legacy .say{font-size: 0.95rem;}
.legacy .say b{font-weight: 700;}
@media (max-width: 900px){
.legacy .set-grid{grid-template-columns: minmax(0, 1fr);}
.legacy .set-stage{order: -1; top: calc(var(--top-h) + 44px); z-index: 5; background: var(--bg); padding: 10px 0; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); border-bottom: 1px solid var(--line-2);}
.legacy .set-stage .stage{grid-template-columns: minmax(0, 150px) minmax(0, 1fr); align-items: center; column-gap: 14px;}
.legacy .set-stage .plate{grid-row: span 3;}
.legacy .set-stage .now{margin-bottom: 4px;}
.legacy .set-stage .now b{font-size: 1.05rem;}
.legacy .set-stage .stage-cap{font-size: 0.85rem; min-height: 0;}
.legacy .set-stage .ctrl{gap: 6px;}
.legacy .set-stage .seg.view, .legacy .set-stage .mirror, .legacy .set-stage .drag-hint, .legacy .set-stage .breath{display: none;}
.legacy .move-meta, .legacy .move-body{padding-left: 0;}
.legacy .set-grid:not(.single) .move{scroll-margin-top: 220px;}
.legacy .move-top{grid-template-columns: 2.4rem minmax(0, 1fr);}
.legacy .move-num{font-size: 1.8rem;}
}
.legacy .widget{margin: 1.6em 0; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); padding: clamp(16px, 3vw, 24px);}
.legacy .widget h3{margin: 0 0 4px !important; font: 400 1.3rem/1.2 var(--f-display) !important;}
.legacy .w-taiji{display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center;}
.legacy .w-taiji svg{width: 180px; height: 180px;}
.legacy .taiji-spin{transform-origin: 90px 90px; animation: spin 40s linear infinite;}
@keyframes spin{ to { transform: rotate(360deg); } }
.legacy .w-taiji dl{margin: 0; display: grid; gap: 10px;}
.legacy .w-taiji dt{font: 400 1.2rem/1.2 var(--f-display);}
.legacy .w-taiji dd{margin: 2px 0 0; color: var(--ink-2); font-size: 0.95rem;}
@media (max-width: 560px){
.legacy .w-taiji{grid-template-columns: 1fr; justify-items: center;}
}
.legacy .w-points{display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 24px; align-items: start;}
.legacy .w-points .plate{cursor: default;}
.legacy .pt-list{display: flex; flex-wrap: wrap; gap: 6px;}
.legacy .pt-list button{border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 6px 12px; font-size: 0.85rem; cursor: pointer;}
.legacy .pt-list button[aria-pressed="true"]{background: var(--ink); color: var(--bg); border-color: var(--ink);}
.legacy .pt-info{margin-top: 16px;}
.legacy .pt-info h4{font: 400 1.35rem/1.2 var(--f-display);}
.legacy .pt-info .zh{font-size: 1.1rem;}
.legacy .pt-info p{margin-top: 8px; color: var(--ink-2);}
@media (max-width: 640px){
.legacy .w-points{grid-template-columns: 1fr;}
.legacy .w-points .plate{max-width: 260px;}
}
.legacy .w-three svg{width: 100%; max-width: 420px; display: block; margin: 0 auto; height: auto;}
.legacy .w-three text{fill: var(--ink);}
.legacy .w-breath{display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center;}
.legacy .pacer{position: relative; width: 200px; height: 200px; display: grid; place-items: center;}
.legacy .pacer .ring{position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--line);}
.legacy .pacer .orb{width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--jade) 55%, var(--surface)) 0%, color-mix(in srgb, var(--jade) 18%, var(--surface)) 70%); transform: scale(0.42); transition: transform linear;}
.legacy .pacer .lbl{position: absolute; text-align: center; font: 400 1.25rem/1.2 var(--f-display);}
.legacy .pacer .lbl small{display: block; font: 700 0.75rem/1.4 var(--f-body); color: var(--ink-2); letter-spacing: .1em; font-variant-numeric: tabular-nums;}
.legacy .w-breath .opts{display: grid; gap: 12px;}
.legacy .w-breath label{font-size: 0.9rem; color: var(--ink-2);}
@media (max-width: 560px){
.legacy .w-breath{grid-template-columns: 1fr; justify-items: center;}
}
.legacy .w-timer{display: grid; gap: 16px;}
.legacy .timer-face{font: 300 clamp(3.2rem, 9vw, 4.6rem)/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;}
.legacy .timer-row{display: flex; flex-wrap: wrap; gap: 10px; align-items: center;}
.legacy .toggle{display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--ink-2); cursor: pointer;}
.legacy .toggle input{width: 18px; height: 18px; accent-color: var(--jade);}
.legacy .w-map svg{width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto;}
.legacy .w-map text{fill: var(--ink-2); font-family: var(--f-body);}
.legacy .map-legend{list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 0.92rem;}
.legacy .map-legend li{display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: baseline;}
.legacy .map-legend i{width: 12px; height: 3px; border-radius: 2px; display: block; transform: translateY(-3px);}
.legacy .w-tri{display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0; border-top: 1px solid var(--line-2); padding: 0; background: none; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0;}
.legacy .w-tri > div{padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 2px 10px;}
.legacy .w-tri .gua{font-size: 2rem; line-height: 1; color: var(--jade); grid-row: span 3; font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", var(--f-zh);}
.legacy .w-tri h4{font: 400 1.15rem/1.25 var(--f-display);}
.legacy .w-tri h4 .zh{font-size: 1.15rem; margin-right: 6px;}
.legacy .w-tri p{font-size: 0.9rem; color: var(--ink-2);}
.legacy .w-plan{display: grid; gap: 14px; padding: 0; background: none; border: 0;}
.legacy .plan-block{border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); padding: 18px; display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 6px 20px;}
.legacy .plan-block .wk{font: 300 1.6rem/1.1 var(--f-display); font-variant-numeric: tabular-nums;}
.legacy .plan-block .wk small{display: block; font: 700 0.7rem/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);}
.legacy .plan-block h4{font: 400 1.25rem/1.25 var(--f-display);}
.legacy .plan-block .mins{font-size: 0.85rem; color: var(--ink-3);}
.legacy .plan-block ul{margin: 6px 0 0; padding-left: 1.1em; font-size: 0.95rem; color: var(--ink-2);}
.legacy .plan-block .reads{display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;}
.legacy .plan-block .reads a{font-size: 0.8rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); background: var(--bg);}
.legacy .plan-block .reads a.done{border-color: var(--jade); color: var(--jade);}
.legacy .plan-block .go{grid-column: 2; justify-self: start; margin-top: 6px;}
@media (max-width: 560px){
.legacy .plan-block{grid-template-columns: 1fr;}
.legacy .plan-block .go{grid-column: 1;}
}
.legacy .w-orbit{display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; align-items: center;}
.legacy .w-orbit ol{margin: 0; padding-left: 1.2em; font-size: 0.93rem; color: var(--ink-2);}
@media (max-width: 560px){
.legacy .w-orbit{grid-template-columns: 1fr;}
.legacy .w-orbit .plate{max-width: 240px;}
}
.legacy .toolbar{display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 20px 0 8px; position: sticky; top: calc(var(--top-h) + 0px); background: var(--bg); padding: 10px 0; z-index: 4;}
.legacy .search{flex: 1 1 260px; max-width: 28rem; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.97rem;}
.legacy .search::placeholder{color: var(--ink-3);}
.legacy .chips{display: flex; flex-wrap: wrap; gap: 6px;}
.legacy .chips button{border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 13px; font-size: 0.85rem; cursor: pointer; color: var(--ink-2);}
.legacy .chips button[aria-pressed="true"]{background: var(--ink); border-color: var(--ink); color: var(--bg);}
.legacy .lib-group{margin-top: 30px;}
.legacy .lib-group > header{display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 8px;}
.legacy .lib-group h2{font: 400 1.5rem/1.2 var(--f-display);}
.legacy .lib-group h2 .zh{font-size: 1.1rem; color: var(--ink-3); margin-left: 8px;}
.legacy .lib-group header a{font-size: 0.85rem; margin-left: auto;}
.legacy .lib-list{display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0 28px;}
.legacy .lib-item{display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--ink); align-items: start;}
.legacy .lib-item:hover b{color: var(--jade);}
.legacy .lib-item .n{font: 400 0.95rem/1.5 var(--f-display); color: var(--ink-3); font-variant-numeric: tabular-nums;}
.legacy .lib-item b{font-weight: 700; font-size: 0.98rem;}
.legacy .lib-item .sub{grid-column: 2; font-size: 0.85rem; color: var(--ink-3);}
.legacy .tag{font: 700 0.66rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--jade); border: 1px solid color-mix(in srgb, var(--jade) 40%, transparent); border-radius: 999px; padding: 4px 7px; white-space: nowrap;}
.legacy .empty{padding: 30px 0; color: var(--ink-3);}
.legacy .gloss-list{display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 0 28px; margin-top: 8px;}
.legacy .gloss-item{display: grid; grid-template-columns: minmax(4.2rem, auto) minmax(0, 1fr); gap: 2px 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); align-items: start;}
.legacy .gloss-item .zh{font-size: 1.5rem; line-height: 1.2; grid-row: span 3;}
.legacy .gloss-item .py{font-size: 1.05rem;}
.legacy .gloss-item p{font-size: 0.93rem; color: var(--ink-2);}
.legacy .gloss-item a{font-size: 0.82rem;}
.legacy .player{display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); margin-top: 18px; padding: clamp(16px, 3vw, 28px); border-radius: 18px; background: var(--surface); border: 1px solid var(--line-2);}
.legacy .player .stage{max-width: 420px; width: 100%; justify-self: center;}
.legacy .player-info{display: grid; gap: 16px; align-content: start;}
.legacy .player-info .rname{font: 700 0.75rem/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);}
.legacy .player-info h2{font: 400 clamp(1.7rem, 3.4vw, 2.4rem)/1.1 var(--f-display);}
.legacy .player-info .say{font-size: 1.08rem; color: var(--ink-2); min-height: 3.3em;}
.legacy .clock{display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;}
.legacy .clock .big{font: 300 clamp(3.4rem, 8vw, 5rem)/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;}
.legacy .clock .of{color: var(--ink-3); font-size: 0.9rem; font-variant-numeric: tabular-nums;}
.legacy .segs{display: flex; gap: 3px; height: 8px;}
.legacy .segs i{display: block; height: 100%; border-radius: 3px; background: var(--line-2); position: relative; overflow: hidden;}
.legacy .segs i b{position: absolute; inset: 0 auto 0 0; background: var(--jade); width: var(--f, 0%);}
.legacy .next-up{font-size: 0.9rem; color: var(--ink-3);}
.legacy .done-card{padding: 16px 18px; border-radius: 12px; background: var(--jade-2);}
.legacy .done-card h3{font: 400 1.4rem/1.2 var(--f-display);}
.legacy .steps-mini{list-style: none; padding: 0; margin: 0; display: grid; gap: 0; font-size: 0.9rem; border-top: 1px solid var(--line-2);}
.legacy .steps-mini li{display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-2); color: var(--ink-2); cursor: pointer;}
.legacy .steps-mini li.on{color: var(--ink); font-weight: 700;}
.legacy .steps-mini li.past{color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line);}
.legacy .steps-mini span:last-child{font-variant-numeric: tabular-nums;}
@media (max-width: 820px){
.legacy .player{grid-template-columns: 1fr;}
.legacy .player .stage{max-width: 300px;}
}
.legacy .log-grid{display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(20px, 4vw, 48px);}
@media (max-width: 860px){
.legacy .log-grid{grid-template-columns: 1fr;}
}
.legacy .stats{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;}
.legacy .stat{padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2);}
.legacy .stat .v{font: 300 2.2rem/1 var(--f-display); font-variant-numeric: tabular-nums;}
.legacy .stat .k{font: 700 0.7rem/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px;}
.legacy .heat-wrap{overflow-x: auto; margin-top: 18px;}
.legacy .heat{display: grid; grid-template-rows: repeat(7, 14px); grid-auto-flow: column; grid-auto-columns: 14px; gap: 4px;}
.legacy .heat i{border-radius: 3px; background: var(--heat-0);}
.legacy .heat i[data-l="1"]{background: var(--heat-1);}
.legacy .heat i[data-l="2"]{background: var(--heat-2);}
.legacy .heat i[data-l="3"]{background: var(--heat-3);}
.legacy .heat i[data-l="4"]{background: var(--heat-4);}
.legacy .heat i.today{outline: 1.5px solid var(--ink); outline-offset: 1px;}
.legacy .heat-key{display: flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--ink-3); margin-top: 10px;}
.legacy .heat-key i{width: 12px; height: 12px; border-radius: 3px; display: inline-block;}
.legacy .log-form{display: grid; gap: 12px; padding: 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2);}
.legacy .log-form h3{font: 400 1.3rem/1.2 var(--f-display);}
.legacy .field{display: grid; gap: 5px; font-size: 0.88rem; color: var(--ink-2);}
.legacy .field input, .legacy .field select, .legacy .field textarea{font: inherit; font-size: 0.97rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; width: 100%;}
.legacy .field textarea{resize: vertical; min-height: 64px;}
.legacy .row2{display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.legacy .entries{list-style: none; padding: 0; margin: 14px 0 0;}
.legacy .entries li{display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 0.92rem; align-items: start;}
.legacy .entries .d{color: var(--ink-3); font-variant-numeric: tabular-nums;}
.legacy .entries .n{color: var(--ink-3); font-size: 0.85rem; display: block;}
.legacy .entries button{border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 0.8rem; padding: 2px 4px;}
.legacy .entries button:hover{color: var(--cinnabar);}
@media (max-width: 480px){
.legacy .pill-word{display: none;}
}
.legacy .wrap.narrow{max-width: 34rem;}
.legacy .auth-card{display: grid; gap: 14px; margin-top: 18px; padding: clamp(18px, 4vw, 26px); border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2);}
.legacy .auth-card h2{font: 400 1.35rem/1.2 var(--f-display);}
.legacy .auth-card form{display: grid; gap: 12px;}
.legacy .auth-card .field small{color: var(--ink-3); font-size: 0.8rem;}
.legacy .auth-card.danger{border-color: color-mix(in srgb, var(--cinnabar) 30%, var(--line-2));}
.legacy .auth-card.danger p{color: var(--ink-2); font-size: 0.95rem;}
.legacy .google-btn{display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; border-radius: 999px; border: 1px solid #747775; background: #FFFFFF; color: #1F1F1F; font: 500 0.98rem/1 var(--f-body); cursor: pointer;}
.legacy .google-btn:hover{background: #F7F8F8;}
.legacy .google-btn svg{width: 20px; height: 20px; flex: none;}
.legacy .or{display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 0.85rem;}
.legacy .or::before, .legacy .or::after{content: ""; flex: 1; height: 1px; background: var(--line);}
.legacy .auth-switch{display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.92rem; color: var(--ink-2);}
.legacy .linkish{border: 0; background: none; padding: 0; color: var(--jade); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em;}
.legacy .auth-msg{padding: 10px 14px; border-radius: 10px; font-size: 0.93rem;}
.legacy .auth-msg.good{background: var(--jade-2); color: var(--ink);}
.legacy .auth-msg.bad{background: color-mix(in srgb, var(--cinnabar) 12%, var(--surface)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--cinnabar) 35%, transparent);}
.legacy .auth-note{margin-top: 18px; font-size: 0.88rem; color: var(--ink-3);}
.legacy .acct-stats{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0;}
.legacy .acct-stats div{padding: 12px; border-radius: 10px; background: var(--bg);}
.legacy .acct-stats dt{font: 700 0.68rem/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);}
.legacy .acct-stats dd{margin: 4px 0 0; font: 300 1.5rem/1.1 var(--f-display); font-variant-numeric: tabular-nums;}
.legacy .sync-line{font-size: 0.9rem; color: var(--ink-3);}
.legacy .sync-line.bad{color: var(--cinnabar);}
.legacy .danger-btn{background: var(--cinnabar); border-color: var(--cinnabar); color: var(--jade-ink);}
.legacy .danger-btn:hover{filter: brightness(1.08); border-color: var(--cinnabar);}
.legacy .acct-leave{margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end;}
.legacy .acct-leave.open{display: block; border-top: 0; padding-top: 0; margin-top: 18px;}
.legacy .quiet-link{border: 0; background: none; padding: 4px 0; cursor: pointer; font: inherit; font-size: 0.84rem; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.22em;}
.legacy .quiet-link:hover{color: var(--ink-2); text-decoration-color: var(--ink-3);}
.legacy .btn:disabled{opacity: 0.6; cursor: progress;}
@media (max-width: 480px){
.legacy .acct-stats{grid-template-columns: 1fr;}
}
.legacy footer.foot{border-top: 1px solid var(--line-2); padding: 28px var(--gutter); padding-block: 28px 40px; color: var(--ink-3); font-size: 0.85rem;}
.legacy footer.foot .wrap{display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between;}
@media (max-width: 560px){
.legacy .routine-grid, .legacy .routine-grid.four{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;}
.legacy .routine{padding: 12px; gap: 4px;}
.legacy .routine .mins{font-size: 1.5rem;}
.legacy .routine p{display: none;}
.legacy .routine h3{font-size: 0.92rem;}
}