.glass-page {
  --gp-paper: #FAFAF8;
  --gp-glass: #FAFAF8;
  --gp-layer: #E4E4E0;
  --gp-border: #C9C9C4;
  --gp-muted: #555555;
  --gp-ink: #111111;
  min-block-size: 100vh;
  margin: 0;
  color: var(--gp-ink);
  background: #E4E4E0;
  font-family: "Noto Sans SC", system-ui, sans-serif;
}
.glass-page *, .glass-page *::before, .glass-page *::after { box-sizing: border-box; }
.glass-page a { color: inherit; text-decoration: none; }
.glass-page .gp-shell { inline-size: min(100% - 48px, 1400px); margin-inline: auto; padding-block: 16px 112px; }
.glass-page .gp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 64px; padding-inline: max(24px, calc((100vw - 1400px) / 2)); border-block-end: 1px solid var(--gp-border); background: #FAFAF8; }
.glass-page .gp-brand, .glass-page .gp-action, .glass-page .gp-dock-link { min-block-size: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.glass-page .gp-brand { font-family: "Noto Serif SC", serif; font-weight: 900; letter-spacing: .08em; }
.glass-page .gp-glass { border: 1px solid var(--gp-border); border-radius: 20px; background: var(--gp-glass); }
.glass-page .gp-action { padding-inline: 16px; border: 1px solid var(--gp-border); border-radius: 14px; background: var(--gp-paper); font-weight: 800; }
.glass-page .gp-action--primary { border-color: var(--gp-ink); background: var(--gp-ink); color: var(--gp-paper); }
.glass-page .gp-dock { position: fixed; inset-inline-start: 50%; inset-block-end: 18px; z-index: 10; display: flex; gap: 4px; padding: 6px; border: 1px solid var(--gp-border); border-radius: 20px; background: var(--gp-glass); transform: translateX(-50%); }
.glass-page .gp-dock-link { min-inline-size: 54px; flex-direction: column; border-radius: 14px; color: var(--gp-muted); font-size: 11px; }
.glass-page .gp-dock-link[aria-current="page"], .glass-page .gp-dock-link:hover, .glass-page .gp-action:hover { background: var(--gp-ink); color: var(--gp-paper); }
.glass-page a:focus-visible, .glass-page button:focus-visible, .glass-page input:focus-visible { outline: 3px solid var(--gp-ink); outline-offset: 3px; }
.glass-page .gp-display-char { font-family: "Kaiti SC", "STKaiti", "KaiTi", "SimKai", "楷体", serif; }
.glass-page button, .glass-page input { min-block-size: 48px; font: inherit; color: inherit; }
.glass-page button { cursor: pointer; }

.glass-page--daily .gp-daily-overview { display: grid; gap: 16px; }
.glass-page--daily .gp-daily-hero, .glass-page--daily .gp-daily-characters, .glass-page--daily .gp-daily-panel { padding: 20px; }
.glass-page--daily .gp-daily-hero h1, .glass-page--daily .gp-daily-characters h2, .glass-page--daily .gp-daily-panel h2 { margin-block: 0 12px; font-family: "Noto Serif SC", serif; }
.glass-page--daily .gp-daily-hero p, .glass-page--daily .gp-daily-panel p { color: var(--gp-muted); line-height: 1.7; }
.glass-page--daily .gp-daily-characters { margin-block: 16px; }
.glass-page--daily .gp-daily-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.glass-page--daily .gp-character-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block-start: 16px; }
.glass-page--daily .gp-character-card { min-block-size: 188px; padding: 12px; border: 1px solid var(--gp-border); border-radius: 14px; background: var(--gp-paper); text-align: center; }
.glass-page--daily .gp-character-card--current { border-color: var(--gp-ink); }
.glass-page--daily .gp-character-card .gp-display-char { display: block; font-size: clamp(64px, 12vw, 96px); line-height: 1; }
.glass-page--daily .gp-character-card p { margin: 8px 0 0; color: var(--gp-muted); font-size: 13px; }
.glass-page--daily .gp-week-grid, .glass-page--daily .gp-quick-grid { display: grid; gap: 8px; }
.glass-page--daily .gp-week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.glass-page--daily .gp-week-grid div, .glass-page--daily .gp-quick-link { min-block-size: 68px; padding: 8px; border: 1px solid var(--gp-border); border-radius: 12px; background: var(--gp-paper); }
.glass-page--daily .gp-week-grid strong { display: block; margin-block-start: 5px; }
.glass-page--daily .gp-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.glass-page--daily .gp-quick-link { display: flex; align-items: center; font-weight: 700; }
@media (min-width: 640px) {
  .glass-page--daily .gp-character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .glass-page--daily .gp-daily-overview { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
  .glass-page--daily .gp-character-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.glass-page--library .gp-library-heading { margin-block: 0 16px; font-family: "Noto Serif SC", serif; }
.glass-page--library .gp-library-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 16px; }
.glass-page--library .gp-library-tools label { display: grid; flex: 1 1 220px; gap: 5px; font-weight: 700; }
.glass-page--library .gp-library-tools input { inline-size: 100%; padding-inline: 12px; border: 1px solid var(--gp-border); border-radius: 12px; background: var(--gp-paper); }
.glass-page--library .gp-library-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-block-start: 16px; }
.glass-page--library .gp-library-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-block-size: 320px; padding: 18px; }
.glass-page--library .gp-library-card .gp-display-char { align-self: center; display: grid; place-items: center; inline-size: 144px; aspect-ratio: 1; border: 1px solid var(--gp-border); background: var(--gp-paper); font-size: 96px; line-height: 1; }
.glass-page--library .gp-library-card h2, .glass-page--library .gp-library-card p { margin: 0; }
.glass-page--library .gp-library-card p { color: var(--gp-muted); line-height: 1.6; }
.glass-page--library .gp-library-card .gp-action { margin-block-start: auto; align-self: stretch; }
@media (min-width: 640px) {
  .glass-page--library .gp-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .glass-page--library .gp-library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.glass-page--canvas .gp-canvas-layout { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(0, 2fr) minmax(190px, .7fr); align-items: start; gap: 16px; }
.glass-page--canvas .gp-canvas-reference, .glass-page--canvas .gp-canvas-stage, .glass-page--canvas .gp-canvas-tools { min-inline-size: 0; padding: 18px; }
.glass-page--canvas .gp-canvas-reference h1, .glass-page--canvas .gp-canvas-reference h2, .glass-page--canvas .gp-canvas-tools h2 { margin: 0 0 12px; font-family: "Noto Serif SC", serif; font-size: 18px; }
.glass-page--canvas .gp-canvas-reference p, .glass-page--canvas .gp-canvas-reference li, .glass-page--canvas .gp-canvas-tools p, .glass-page--canvas .gp-canvas-stage > p { color: var(--gp-muted); line-height: 1.65; font-size: 14px; }
.glass-page--canvas .gp-canvas-reference ul { padding-inline-start: 20px; }
.glass-page--canvas .gp-reference-grid { display: grid; place-items: center; aspect-ratio: 1; margin-block: 14px; border: 1px solid var(--gp-border); background: var(--gp-paper); }
.glass-page--canvas .gp-reference-grid .gp-display-char { font-size: clamp(120px, 18vw, 196px); line-height: 1; }
.glass-page--canvas .gp-canvas-note { padding: 10px; border-inline-start: 3px solid var(--gp-ink); background: var(--gp-paper); }
.glass-page--canvas .gp-canvas-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-block-end: 12px; color: var(--gp-muted); font-size: 13px; }
.glass-page--canvas .gp-canvas-board { position: relative; display: grid; place-items: center; inline-size: min(100%, 720px); margin-inline: auto; border: 1px solid var(--gp-border); background: #FAFAF8; }
.glass-page--canvas .gp-canvas-grid, .glass-page--canvas #active-drawing-canvas, .glass-page--canvas .gp-canvas-ghost { grid-area: 1 / 1; inline-size: min(100%, 720px); aspect-ratio: 1; }
.glass-page--canvas .gp-canvas-grid { display: block; pointer-events: none; }
.glass-page--canvas #active-drawing-canvas { display: block; touch-action: none; cursor: crosshair; }
.glass-page--canvas .gp-canvas-ghost { display: grid; place-items: center; color: rgba(17, 17, 17, .12); font-size: clamp(150px, 28vw, 310px); line-height: 1; pointer-events: none; }
.glass-page--canvas .gp-canvas-board--tian .gp-canvas-ghost { font-size: clamp(138px, 25vw, 286px); }
.glass-page--canvas .gp-tool-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block: 10px 16px; }
.glass-page--canvas .gp-tool-button { padding: 8px; border: 1px solid var(--gp-border); border-radius: 12px; background: var(--gp-paper); font-weight: 700; }
.glass-page--canvas .gp-tool-button--active, .glass-page--canvas .gp-tool-button:hover { border-color: var(--gp-ink); background: var(--gp-ink); color: var(--gp-paper); }
.glass-page--canvas .gp-canvas-tools .gp-action { inline-size: 100%; margin-block-start: 4px; }

.glass-page--evaluation .gp-evaluation-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.glass-page--evaluation .gp-evaluation-summary, .glass-page--evaluation .gp-evaluation-topology, .glass-page--evaluation .gp-evaluation-advice { padding: 20px; }
.glass-page--evaluation .gp-evaluation-summary > p:first-child { margin: 0; color: var(--gp-muted); }
.glass-page--evaluation .gp-evaluation-summary > strong { display: inline-block; margin-block: 8px; font-family: "Noto Serif SC", serif; font-size: clamp(72px, 12vw, 112px); line-height: .9; }
.glass-page--evaluation .gp-evaluation-summary > span { display: inline-flex; min-block-size: 32px; align-items: center; margin-inline-start: 10px; padding-inline: 10px; border: 1px solid var(--gp-ink); border-radius: 999px; font-weight: 800; vertical-align: top; }
.glass-page--evaluation .gp-evaluation-summary > p { color: var(--gp-muted); line-height: 1.65; }
.glass-page--evaluation .gp-evaluation-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 16px; }
.glass-page--evaluation .gp-evaluation-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.glass-page--evaluation .gp-evaluation-section-head h1, .glass-page--evaluation .gp-evaluation-metrics h2, .glass-page--evaluation .gp-evaluation-advice h2 { margin: 0 0 12px; font-family: "Noto Serif SC", serif; }
.glass-page--evaluation .gp-evaluation-section-head span { color: var(--gp-muted); font-size: 13px; }
.glass-page--evaluation .gp-topology-board { position: relative; display: grid; place-items: center; min-block-size: 230px; border: 1px solid var(--gp-border); background: var(--gp-paper); overflow: hidden; }
.glass-page--evaluation .gp-topology-board .gp-display-char { color: rgba(17, 17, 17, .14); font-size: 190px; line-height: 1; }
.glass-page--evaluation .gp-topology-stroke { position: absolute; display: block; block-size: 7px; border-radius: 99px; background: #111111; transform-origin: left center; }
.glass-page--evaluation .gp-topology-stroke--one { inline-size: 72px; inset: 28% auto auto 38%; }
.glass-page--evaluation .gp-topology-stroke--two { inline-size: 126px; inset: 44% auto auto 27%; }
.glass-page--evaluation .gp-topology-stroke--three { inline-size: 88px; inset: 55% auto auto 43%; transform: rotate(128deg); }
.glass-page--evaluation .gp-topology-stroke--four { inline-size: 96px; inset: 55% auto auto 49%; transform: rotate(42deg); }
.glass-page--evaluation .gp-topology-notes { margin: 14px 0 0; padding-inline-start: 20px; color: var(--gp-muted); line-height: 1.65; }
.glass-page--evaluation .gp-evaluation-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.glass-page--evaluation .gp-evaluation-metrics > h2 { grid-column: 1 / -1; }
.glass-page--evaluation .gp-metric-card { padding: 16px; }
.glass-page--evaluation .gp-metric-card > div:first-child { display: flex; justify-content: space-between; gap: 10px; }
.glass-page--evaluation .gp-metric-card h3, .glass-page--evaluation .gp-metric-card p { margin: 0; }
.glass-page--evaluation .gp-metric-card p, .glass-page--evaluation .gp-evaluation-advice p { color: var(--gp-muted); line-height: 1.65; }
.glass-page--evaluation .gp-metric-bar { block-size: 8px; margin-block: 12px; background: var(--gp-layer); }
.glass-page--evaluation .gp-metric-bar i { display: block; block-size: 100%; background: var(--gp-ink); }
.glass-page--evaluation .gp-evaluation-advice blockquote { margin: 0; padding: 16px; border-inline-start: 3px solid var(--gp-ink); background: var(--gp-paper); font-family: "Noto Serif SC", serif; line-height: 1.8; }

@media (min-width: 1024px) {
  .glass-page--evaluation .gp-evaluation-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .glass-page--evaluation .gp-evaluation-metrics, .glass-page--evaluation .gp-evaluation-advice { grid-column: 1 / -1; }
  .glass-page--evaluation .gp-evaluation-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .glass-page--canvas .gp-canvas-layout { grid-template-columns: minmax(0, 1fr); }
  .glass-page--canvas .gp-canvas-stage { order: 1; }
  .glass-page--canvas .gp-canvas-reference { order: 2; }
  .glass-page--canvas .gp-canvas-tools { order: 3; }
}
@media (max-width: 639px) {
  .glass-page .gp-topbar { min-block-size: 58px; padding-inline: 24px; }
  .glass-page .gp-topbar > span, .glass-page .gp-topbar > strong { display: none; }
  .glass-page .gp-shell { inline-size: min(100% - 48px, 640px); padding-block: 10px 104px; }
  .glass-page .gp-dock { inset-block-end: 10px; inline-size: min(100% - 48px, 390px); justify-content: space-around; }
  .glass-page .gp-dock-link { min-inline-size: 0; flex: 1; }
  .glass-page--daily .gp-week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .glass-page--canvas .gp-canvas-reference, .glass-page--canvas .gp-canvas-stage, .glass-page--canvas .gp-canvas-tools, .glass-page--evaluation .gp-evaluation-summary, .glass-page--evaluation .gp-evaluation-topology, .glass-page--evaluation .gp-evaluation-advice { padding: 14px; }
  .glass-page--evaluation .gp-evaluation-metrics { grid-template-columns: minmax(0, 1fr); }
}
.glass-page--replay .gp-replay-layout { display: grid; gap: 16px; align-items: start; }
.glass-page--replay .gp-replay-stage, .glass-page--replay .gp-replay-controls { padding: 20px; }
.glass-page--replay .gp-replay-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.glass-page--replay .gp-replay-heading p, .glass-page--replay .gp-replay-heading h1, .glass-page--replay .gp-replay-board h2, .glass-page--replay .gp-replay-analysis h2 { margin: 0; }
.glass-page--replay .gp-replay-heading p, .glass-page--replay .gp-replay-heading > span, .glass-page--replay .gp-replay-stroke-nav, .glass-page--replay .gp-replay-board p, .glass-page--replay .gp-replay-controls > p { color: var(--gp-muted); line-height: 1.65; }
.glass-page--replay .gp-replay-heading h1, .glass-page--replay .gp-replay-board h2, .glass-page--replay .gp-replay-analysis h2 { font-family: "Noto Serif SC", serif; }
.glass-page--replay .gp-replay-heading > span { font-size: 13px; }
.glass-page--replay .gp-replay-stroke-nav { margin-block: 16px; padding: 10px; border-inline-start: 3px solid var(--gp-ink); background: var(--gp-paper); }
.glass-page--replay .gp-replay-comparison { display: grid; gap: 12px; }
.glass-page--replay .gp-replay-board { min-inline-size: 0; padding: 14px; border: 1px solid var(--gp-border); border-radius: 14px; background: var(--gp-paper); }
.glass-page--replay .gp-replay-grid { position: relative; display: grid; place-items: center; aspect-ratio: 1.15; margin-block: 12px; overflow: hidden; border: 1px solid var(--gp-border); background: #FAFAF8; }
.glass-page--replay .gp-replay-grid .gp-display-char { color: rgba(17, 17, 17, .13); font-size: clamp(130px, 19vw, 210px); line-height: 1; }
.glass-page--replay .gp-replay-stroke { position: absolute; display: block; block-size: 8px; border-radius: 99px; background: #111111; transform-origin: left center; }
.glass-page--replay .gp-replay-stroke--short { inline-size: 44px; inset: 27% auto auto 42%; }
.glass-page--replay .gp-replay-stroke--long { inline-size: 62%; inset: 43% auto auto 20%; }
.glass-page--replay .gp-replay-stroke--student { transform: rotate(-1deg); }
.glass-page--replay .gp-replay-stroke--master { transform: rotate(2deg); }
.glass-page--replay .gp-replay-analysis { display: grid; gap: 8px; margin-block-start: 16px; padding: 14px; border: 1px solid var(--gp-border); background: var(--gp-paper); }
.glass-page--replay .gp-replay-analysis > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; line-height: 1.65; }
.glass-page--replay .gp-replay-analysis blockquote { margin: 6px 0 0; padding: 12px; border-inline-start: 3px solid var(--gp-ink); color: var(--gp-muted); font-family: "Noto Serif SC", serif; line-height: 1.8; }
.glass-page--replay .gp-replay-controls > p { margin-block: 0 12px; }
.glass-page--replay .gp-replay-control-row { display: flex; flex-wrap: wrap; gap: 8px; }
.glass-page--replay .gp-replay-control-row button { min-inline-size: 76px; padding-inline: 12px; border: 1px solid var(--gp-border); border-radius: 12px; background: var(--gp-paper); font-weight: 800; }
.glass-page--replay .gp-replay-control-row button:hover, .glass-page--replay .gp-replay-control-row button:focus-visible { border-color: var(--gp-ink); background: var(--gp-ink); color: var(--gp-paper); }
@media (min-width: 640px) {
  .glass-page--replay .gp-replay-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .glass-page--replay .gp-replay-layout { grid-template-columns: minmax(0, 2fr) minmax(260px, .8fr); }
  .glass-page--replay .gp-replay-controls { position: sticky; inset-block-start: 16px; }
}

.glass-page--mistakes .gp-mistakes-layout { display: grid; gap: 16px; align-items: start; }
.glass-page--mistakes .gp-mistake-priority, .glass-page--mistakes .gp-mistake-drill-panel, .glass-page--mistakes .gp-mistake-advice { padding: 20px; }
.glass-page--mistakes .gp-mistake-priority > p:first-child, .glass-page--mistakes .gp-mistake-priority > p:nth-of-type(2), .glass-page--mistakes .gp-mistake-drill-panel > p, .glass-page--mistakes .gp-mistake-advice p { color: var(--gp-muted); line-height: 1.65; }
.glass-page--mistakes .gp-mistake-priority h1, .glass-page--mistakes .gp-mistake-drill-panel h2, .glass-page--mistakes .gp-mistake-advice h2 { margin: 6px 0 12px; font-family: "Noto Serif SC", serif; }
.glass-page--mistakes .gp-mistake-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px; }
.glass-page--mistakes .gp-mistake-filter button { padding-inline: 12px; border: 1px solid var(--gp-border); border-radius: 999px; background: var(--gp-paper); font-weight: 700; }
.glass-page--mistakes .gp-mistake-filter button:hover, .glass-page--mistakes .gp-mistake-filter button:focus-visible { border-color: var(--gp-ink); background: var(--gp-ink); color: var(--gp-paper); }
.glass-page--mistakes .gp-mistake-card-list { display: grid; gap: 10px; }
.glass-page--mistakes .gp-mistake-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--gp-border); border-radius: 14px; background: var(--gp-paper); }
.glass-page--mistakes .gp-mistake-card > .gp-display-char { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--gp-border); font-size: 50px; line-height: 1; }
.glass-page--mistakes .gp-mistake-card h2, .glass-page--mistakes .gp-mistake-card p, .glass-page--mistakes .gp-drill-card p { margin: 0; }
.glass-page--mistakes .gp-mistake-card h2 { font-family: "Noto Serif SC", serif; font-size: 18px; }
.glass-page--mistakes .gp-mistake-card p, .glass-page--mistakes .gp-drill-card p { margin-block: 5px 10px; color: var(--gp-muted); line-height: 1.55; font-size: 13px; }
.glass-page--mistakes .gp-mistake-card .gp-action { padding-inline: 12px; }
.glass-page--mistakes .gp-mistake-drills { display: grid; gap: 16px; }
.glass-page--mistakes .gp-drill-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; margin-block-start: 10px; padding: 12px; border: 1px solid var(--gp-border); border-radius: 14px; background: var(--gp-paper); }
.glass-page--mistakes .gp-drill-card strong { font-family: "Noto Serif SC", serif; }
.glass-page--mistakes .gp-drill-card span { color: var(--gp-muted); font-size: 13px; text-align: end; }
.glass-page--mistakes .gp-drill-card p { grid-column: 1 / -1; }
.glass-page--mistakes .gp-drill-card .gp-action { grid-column: 1 / -1; justify-self: start; padding-inline: 12px; }
.glass-page--mistakes .gp-mistake-advice blockquote { margin: 0; padding: 12px; border-inline-start: 3px solid var(--gp-ink); background: var(--gp-paper); font-family: "Noto Serif SC", serif; line-height: 1.8; }
@media (min-width: 640px) {
  .glass-page--mistakes .gp-mistakes-layout { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); }
}
@media (min-width: 1024px) {
  .glass-page--mistakes .gp-mistakes-layout { grid-template-columns: minmax(0, 1.35fr) minmax(340px, .9fr); }
}
@media (max-width: 639px) {
  .glass-page--replay .gp-replay-stage, .glass-page--replay .gp-replay-controls, .glass-page--mistakes .gp-mistake-priority, .glass-page--mistakes .gp-mistake-drill-panel, .glass-page--mistakes .gp-mistake-advice { padding: 14px; }
  .glass-page--replay .gp-replay-analysis > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .glass-page--replay .gp-replay-control-row > * { flex: 1 1 calc(50% - 8px); }
}

@media (prefers-reduced-motion: reduce) {
  .glass-page *, .glass-page *::before, .glass-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.glass-page--review .gp-review-layout { display: grid; gap: 16px; align-items: start; }
.glass-page--review .gp-review-feedback, .glass-page--review .gp-review-annotation { min-inline-size: 0; padding: 20px; }
.glass-page--review .gp-review-feedback h1, .glass-page--review .gp-review-annotation h2 { margin: 0; font-family: "Noto Serif SC", serif; }
.glass-page--review .gp-review-feedback > p, .glass-page--review .gp-review-annotation > p { color: var(--gp-muted); line-height: 1.7; }
.glass-page--review .gp-review-quota { padding: 8px 12px; border: 1px solid var(--gp-border); border-radius: 999px; color: var(--gp-muted); font-size: 13px; }
.glass-page--review .gp-review-quota strong { color: var(--gp-ink); }
.glass-page--review .gp-review-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 16px; }
.glass-page--review .gp-review-voice, .glass-page--review .gp-review-advice { padding: 16px; border: 1px solid var(--gp-border); border-radius: 14px; background: var(--gp-paper); }
.glass-page--review .gp-review-voice > div:first-child, .glass-page--review .gp-review-advice-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.glass-page--review .gp-review-voice > div:first-child { justify-content: flex-start; }
.glass-page--review .gp-review-voice > div:first-child span:last-child, .glass-page--review .gp-review-advice-heading > span { color: var(--gp-muted); font-size: 13px; }
.glass-page--review .gp-review-wave { display: flex; align-items: center; gap: 5px; min-block-size: 48px; margin-block: 12px 8px; padding: 8px; border: 1px solid var(--gp-border); background: var(--gp-paper); }
.glass-page--review .gp-review-wave i { display: block; inline-size: 6px; block-size: 18px; border-radius: 999px; background: var(--gp-ink); }
.glass-page--review .gp-review-wave i:nth-child(2n) { block-size: 28px; }
.glass-page--review .gp-review-wave i:nth-child(3n) { block-size: 12px; }
.glass-page--review .gp-review-voice p, .glass-page--review .gp-review-advice > p { margin: 0; color: var(--gp-muted); line-height: 1.7; }
.glass-page--review .gp-review-advice { margin-block-start: 12px; }
.glass-page--review .gp-review-advice h2 { font-size: 18px; }
.glass-page--review .gp-review-advice blockquote { margin: 14px 0; padding: 12px; border-inline-start: 3px solid var(--gp-ink); background: var(--gp-paper); font-family: "Noto Serif SC", serif; line-height: 1.8; }
.glass-page--review .gp-review-advice ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.glass-page--review .gp-review-advice li { padding: 10px; border: 1px solid var(--gp-border); background: var(--gp-paper); color: var(--gp-muted); line-height: 1.6; }
.glass-page--review .gp-review-advice li strong { color: var(--gp-ink); }
.glass-page--review .gp-review-signature { margin-block-start: 14px !important; font-size: 13px; }
.glass-page--review .gp-review-paper { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin-block: 16px; overflow: hidden; border: 1px solid var(--gp-border); background: var(--gp-paper); }
.glass-page--review .gp-review-paper > .gp-display-char { font-size: clamp(150px, 25vw, 300px); line-height: 1; }
.glass-page--review .gp-review-mark { position: absolute; max-inline-size: 42%; color: var(--gp-muted); font-family: "Kaiti SC", "STKaiti", "KaiTi", "SimKai", "楷体", serif; font-size: clamp(12px, 1.5vw, 16px); line-height: 1.35; }
.glass-page--review .gp-review-mark::before { content: "↗"; margin-inline-end: 3px; color: var(--gp-ink); }
.glass-page--review .gp-review-mark--top { inset: 10% auto auto 7%; }
.glass-page--review .gp-review-mark--right { inset: 42% 4% auto auto; }
.glass-page--review .gp-review-mark--bottom { inset: auto 8% 9% auto; }
.glass-page--review .gp-review-annotation > .gp-action { inline-size: 100%; }
@media (min-width: 1024px) {
  .glass-page--review .gp-review-layout { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); }
  .glass-page--review .gp-review-annotation { position: sticky; inset-block-start: 16px; }
}
@media (max-width: 639px) {
  .glass-page--review .gp-review-feedback, .glass-page--review .gp-review-annotation { padding: 14px; }
  .glass-page--review .gp-review-quota { display: none; }
  .glass-page--review .gp-review-actions > * { flex: 1 1 100%; }
}

.glass-page--exhibition .gp-exhibition-summary, .glass-page--exhibition .gp-exhibition-information { padding: 20px; }
.glass-page--exhibition .gp-exhibition-summary { display: grid; gap: 16px; align-items: start; }
.glass-page--exhibition .gp-exhibition-eyebrow { margin: 0 0 6px; color: var(--gp-muted); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.glass-page--exhibition .gp-exhibition-summary h1, .glass-page--exhibition .gp-exhibition-information h2, .glass-page--exhibition .gp-exhibition-entry h2 { margin: 0; font-family: "Noto Serif SC", serif; }
.glass-page--exhibition .gp-exhibition-summary > div:first-child > p:last-of-type, .glass-page--exhibition .gp-exhibition-information p, .glass-page--exhibition .gp-exhibition-entry > p { color: var(--gp-muted); line-height: 1.7; }
.glass-page--exhibition .gp-exhibition-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
.glass-page--exhibition .gp-exhibition-facts div { padding: 10px; border: 1px solid var(--gp-border); background: var(--gp-paper); }
.glass-page--exhibition .gp-exhibition-facts dt { color: var(--gp-muted); font-size: 12px; }
.glass-page--exhibition .gp-exhibition-facts dd { margin: 5px 0 0; font-family: "Noto Serif SC", serif; font-size: 20px; font-weight: 900; }
.glass-page--exhibition .gp-exhibition-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.glass-page--exhibition .gp-exhibition-entries { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-block: 16px; }
.glass-page--exhibition .gp-exhibition-entry { display: flex; flex-direction: column; gap: 12px; min-inline-size: 0; padding: 16px; }
.glass-page--exhibition .gp-entry-heading, .glass-page--exhibition .gp-entry-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.glass-page--exhibition .gp-entry-heading > div > span { color: var(--gp-muted); font-size: 12px; }
.glass-page--exhibition .gp-entry-heading h2 { margin-block-start: 4px; font-size: 19px; }
.glass-page--exhibition .gp-entry-heading > strong { padding: 6px 8px; border: 1px solid var(--gp-ink); font-size: 12px; white-space: nowrap; }
.glass-page--exhibition .gp-entry-sheet { display: grid; place-items: center; min-block-size: 248px; padding: 14px; border: 1px solid var(--gp-border); background: var(--gp-paper); text-align: center; }
.glass-page--exhibition .gp-entry-sheet .gp-display-char { margin: 0; font-size: 28px; line-height: 1.5; }
.glass-page--exhibition .gp-entry-sheet small { color: var(--gp-muted); line-height: 1.5; }
.glass-page--exhibition .gp-exhibition-entry > p { margin: 0; font-size: 13px; }
.glass-page--exhibition .gp-entry-footer { margin-block-start: auto; padding-block-start: 10px; border-block-start: 1px solid var(--gp-border); color: var(--gp-muted); font-size: 13px; }
.glass-page--exhibition .gp-entry-footer button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding-inline: 12px; border: 1px solid var(--gp-border); border-radius: 12px; background: var(--gp-paper); font-weight: 800; }
.glass-page--exhibition .gp-entry-footer button:hover { border-color: var(--gp-ink); background: var(--gp-ink); color: var(--gp-paper); }
.glass-page--exhibition .gp-exhibition-information { margin-block-start: 16px; }
.glass-page--exhibition .gp-exhibition-information h2 { font-size: 20px; }
.glass-page--exhibition .gp-exhibition-information > .gp-action { margin-block-start: 4px; }
@media (min-width: 640px) {
  .glass-page--exhibition .gp-exhibition-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .glass-page--exhibition .gp-exhibition-summary { grid-template-columns: minmax(0, 1fr) minmax(210px, .4fr); }
  .glass-page--exhibition .gp-exhibition-actions { flex-direction: column; align-items: stretch; }
  .glass-page--exhibition .gp-exhibition-entries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .glass-page--exhibition .gp-exhibition-summary, .glass-page--exhibition .gp-exhibition-information { padding: 14px; }
  .glass-page--exhibition .gp-exhibition-actions > * { flex: 1 1 100%; }
  .glass-page--exhibition .gp-exhibition-facts dd { font-size: 17px; }
  .glass-page--exhibition .gp-entry-footer { align-items: flex-start; flex-direction: column; }
  .glass-page--exhibition .gp-entry-footer button { inline-size: 100%; }
}


.glass-page--cockpit .gp-cockpit-layout { display: grid; gap: 16px; }
.glass-page--cockpit .gp-cockpit-summary, .glass-page--cockpit .gp-cockpit-assignment, .glass-page--cockpit .gp-cockpit-kpis, .glass-page--cockpit .gp-cockpit-alerts, .glass-page--cockpit .gp-cockpit-table-wrap { min-inline-size: 0; padding: 20px; }
.glass-page--cockpit .gp-cockpit-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.glass-page--cockpit .gp-cockpit-eyebrow { margin: 0 0 6px; color: var(--gp-muted); font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.glass-page--cockpit .gp-cockpit-summary h1, .glass-page--cockpit h2 { margin: 0; font-family: "Noto Serif SC", serif; }
.glass-page--cockpit .gp-cockpit-summary p:not(.gp-cockpit-eyebrow), .glass-page--cockpit .gp-cockpit-assignment > p, .glass-page--cockpit .gp-cockpit-report, .glass-page--cockpit .gp-cockpit-table-heading p, .glass-page--cockpit .gp-cockpit-table-note { color: var(--gp-muted); line-height: 1.65; }
.glass-page--cockpit .gp-cockpit-teacher { color: var(--gp-muted); font-size: 14px; }
.glass-page--cockpit .gp-cockpit-overview { display: grid; gap: 16px; }
.glass-page--cockpit .gp-cockpit-section-heading, .glass-page--cockpit .gp-cockpit-table-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.glass-page--cockpit .gp-cockpit-section-heading > span { color: var(--gp-muted); font-size: 13px; }
.glass-page--cockpit .gp-cockpit-character-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-block: 14px; }
.glass-page--cockpit .gp-cockpit-character-grid > div { display: grid; place-items: center; min-block-size: 92px; padding: 8px; border: 1px solid var(--gp-border); background: var(--gp-paper); }
.glass-page--cockpit .gp-cockpit-character-grid .gp-display-char { font-size: 42px; line-height: 1; }
.glass-page--cockpit .gp-cockpit-character-grid small { color: var(--gp-muted); font-size: 12px; }
.glass-page--cockpit .gp-cockpit-checklist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--gp-muted); line-height: 1.55; }
.glass-page--cockpit .gp-cockpit-checklist li { padding: 9px 10px; border-inline-start: 3px solid var(--gp-ink); background: var(--gp-paper); }
.glass-page--cockpit .gp-cockpit-kpis > h2 { margin-block-end: 14px; }
.glass-page--cockpit .gp-cockpit-kpi-grid { display: grid; gap: 10px; }
.glass-page--cockpit .gp-cockpit-kpi-grid > div { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--gp-border); border-radius: 14px; background: var(--gp-paper); }
.glass-page--cockpit .gp-cockpit-kpi-grid span, .glass-page--cockpit .gp-cockpit-kpi-grid small { color: var(--gp-muted); line-height: 1.5; }
.glass-page--cockpit .gp-cockpit-kpi-grid strong { font-family: "Noto Serif SC", serif; font-size: 25px; }
.glass-page--cockpit .gp-cockpit-report { margin-block: 14px; padding: 12px; border-inline-start: 3px solid var(--gp-ink); background: var(--gp-paper); }
.glass-page--cockpit .gp-cockpit-report strong { color: var(--gp-ink); }
.glass-page--cockpit .gp-cockpit-alerts { display: grid; gap: 14px; }
.glass-page--cockpit .gp-cockpit-alert-grid { display: grid; gap: 10px; }
.glass-page--cockpit .gp-cockpit-alert-grid article { padding: 14px; border: 1px solid var(--gp-border); border-radius: 14px; background: var(--gp-paper); }
.glass-page--cockpit .gp-cockpit-alert-grid strong, .glass-page--cockpit .gp-cockpit-alert-grid b { display: block; }
.glass-page--cockpit .gp-cockpit-alert-grid .gp-display-char { font-size: 26px; }
.glass-page--cockpit .gp-cockpit-alert-grid b { margin-block: 7px; font-family: "Noto Serif SC", serif; font-size: 19px; }
.glass-page--cockpit .gp-cockpit-alert-grid p { margin: 0; color: var(--gp-muted); line-height: 1.6; font-size: 14px; }
.glass-page--cockpit .gp-cockpit-table-heading { align-items: end; margin-block-end: 14px; }
.glass-page--cockpit .gp-cockpit-table-heading p { margin: 5px 0 0; font-size: 13px; }
.glass-page--cockpit .gp-cockpit-table-scroll { overflow-x: auto; border: 1px solid var(--gp-border); }
.glass-page--cockpit .gp-cockpit-table-scroll:focus-visible { outline: 3px solid var(--gp-ink); outline-offset: 3px; }
.glass-page--cockpit table { inline-size: 100%; min-inline-size: 760px; border-collapse: collapse; background: var(--gp-paper); text-align: start; }
.glass-page--cockpit caption { padding: 10px; color: var(--gp-muted); text-align: start; font-size: 13px; }
.glass-page--cockpit th, .glass-page--cockpit td { padding: 12px; border-block-start: 1px solid var(--gp-border); vertical-align: top; line-height: 1.55; }
.glass-page--cockpit th { background: var(--gp-layer); font-size: 13px; white-space: nowrap; }
.glass-page--cockpit td { color: var(--gp-muted); font-size: 14px; }
.glass-page--cockpit td:nth-child(2), .glass-page--cockpit td:nth-child(3), .glass-page--cockpit td:nth-child(4) { color: var(--gp-ink); font-weight: 800; white-space: nowrap; }
.glass-page--cockpit td .gp-action { padding-inline: 10px; font-size: 13px; white-space: nowrap; }
.glass-page--cockpit .gp-cockpit-table-note { margin: 10px 0 0; font-size: 13px; }
.glass-page--cockpit .gp-cockpit-footer { inline-size: min(100% - 48px, 1400px); margin: 0 auto; padding: 0 0 28px; color: var(--gp-muted); font-size: 13px; line-height: 1.6; }
@media (min-width: 640px) {
  .glass-page--cockpit .gp-cockpit-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .glass-page--cockpit .gp-cockpit-alert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .glass-page--cockpit .gp-cockpit-overview { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
@media (max-width: 639px) {
  .glass-page--cockpit .gp-cockpit-summary, .glass-page--cockpit .gp-cockpit-assignment, .glass-page--cockpit .gp-cockpit-kpis, .glass-page--cockpit .gp-cockpit-alerts, .glass-page--cockpit .gp-cockpit-table-wrap { padding: 14px; }
  .glass-page--cockpit .gp-cockpit-summary .gp-action { inline-size: 100%; }
  .glass-page--cockpit table { min-inline-size: 620px; }
  .glass-page--cockpit .gp-cockpit-footer { inline-size: min(100% - 48px, 640px); }
}

.glass-page--profile .gp-profile-layout { display: grid; gap: 16px; align-items: start; }
.glass-page--profile .gp-profile-archive, .glass-page--profile .gp-profile-device { min-inline-size: 0; padding: 20px; }
.glass-page--profile .gp-profile-identity { display: flex; align-items: center; gap: 14px; }
.glass-page--profile .gp-profile-avatar { display: grid; flex: 0 0 auto; place-items: center; inline-size: 68px; block-size: 68px; border: 1px solid var(--gp-ink); border-radius: 50%; background: var(--gp-paper); font-family: "Kaiti SC", "STKaiti", "KaiTi", "SimKai", "楷体", serif; font-size: 38px; }
.glass-page--profile .gp-profile-identity h1, .glass-page--profile h2 { margin: 0; font-family: "Noto Serif SC", serif; }
.glass-page--profile .gp-profile-identity p, .glass-page--profile .gp-profile-device > p, .glass-page--profile .gp-profile-scroll > p, .glass-page--profile .gp-profile-cloud > p, .glass-page--profile .gp-profile-stylus > p { color: var(--gp-muted); line-height: 1.6; }
.glass-page--profile .gp-profile-identity p { margin: 3px 0 0; font-size: 13px; }
.glass-page--profile .gp-profile-badge { display: inline-flex; align-items: center; gap: 6px; margin-block: 16px; padding: 9px 12px; border: 1px solid var(--gp-ink); border-radius: 999px; font-weight: 800; }
.glass-page--profile .gp-profile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.glass-page--profile .gp-profile-stats > div { padding: 10px; border: 1px solid var(--gp-border); background: var(--gp-paper); }
.glass-page--profile .gp-profile-stats span, .glass-page--profile .gp-profile-stats strong { display: block; }
.glass-page--profile .gp-profile-stats span { color: var(--gp-muted); font-size: 12px; }
.glass-page--profile .gp-profile-stats strong { margin-block-start: 4px; font-family: "Noto Serif SC", serif; font-size: 19px; }
.glass-page--profile .gp-profile-scroll { margin-block: 16px; padding: 16px; border: 1px solid var(--gp-border); border-radius: 14px; background: var(--gp-paper); }
.glass-page--profile .gp-profile-scroll > p { margin-block: 8px 14px; }
.glass-page--profile .gp-profile-day-grid { display: grid; gap: 8px; }
.glass-page--profile .gp-profile-day-grid > div { display: grid; grid-template-columns: auto 54px auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--gp-border); background: var(--gp-paper); }
.glass-page--profile .gp-profile-day-grid span, .glass-page--profile .gp-profile-day-grid small { color: var(--gp-muted); font-size: 12px; }
.glass-page--profile .gp-profile-day-grid .gp-display-char { font-size: 44px; line-height: 1; text-align: center; }
.glass-page--profile .gp-profile-day-grid b { font-family: "Noto Serif SC", serif; }
.glass-page--profile .gp-profile-day-grid small { grid-column: 1 / -1; }
.glass-page--profile .gp-profile-scroll blockquote { margin: 14px 0; padding: 12px; border-inline-start: 3px solid var(--gp-ink); background: var(--gp-paper); color: var(--gp-muted); font-family: "Noto Serif SC", serif; line-height: 1.75; }
.glass-page--profile .gp-profile-scroll .gp-action { inline-size: 100%; text-align: center; }
.glass-page--profile .gp-profile-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.glass-page--profile .gp-profile-section-heading > span { color: var(--gp-muted); font-size: 13px; }
.glass-page--profile .gp-profile-device > p { margin: 8px 0 14px; }
.glass-page--profile .gp-profile-mode-grid { display: grid; gap: 10px; }
.glass-page--profile .gp-profile-mode { display: grid; gap: 5px; padding: 14px; border: 1px solid var(--gp-border); border-radius: 14px; background: var(--gp-paper); text-align: start; }
.glass-page--profile .gp-profile-mode--active, .glass-page--profile .gp-profile-mode:hover, .glass-page--profile .gp-profile-mode:focus-visible { border-color: var(--gp-ink); background: var(--gp-paper); }
.glass-page--profile .gp-profile-mode span, .glass-page--profile .gp-profile-mode small { color: var(--gp-muted); line-height: 1.5; }
.glass-page--profile .gp-profile-mode small { font-size: 12px; }
.glass-page--profile .gp-profile-setting-row, .glass-page--profile .gp-profile-hand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-block: 14px; padding: 12px; border-block: 1px solid var(--gp-border); }
.glass-page--profile .gp-profile-setting-row strong, .glass-page--profile .gp-profile-setting-row span, .glass-page--profile .gp-profile-hand strong, .glass-page--profile .gp-profile-hand span { display: block; }
.glass-page--profile .gp-profile-setting-row span, .glass-page--profile .gp-profile-hand span { margin-block-start: 4px; color: var(--gp-muted); font-size: 13px; line-height: 1.55; }
.glass-page--profile .gp-profile-cloud, .glass-page--profile .gp-profile-stylus { margin-block-start: 16px; padding-block-start: 16px; border-block-start: 1px solid var(--gp-border); }
.glass-page--profile .gp-profile-storage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-block: 12px; color: var(--gp-muted); font-size: 13px; }
.glass-page--profile .gp-profile-storage > i { grid-column: 1 / -1; display: block; block-size: 8px; background: var(--gp-layer); }
.glass-page--profile .gp-profile-storage > i > i { display: block; inline-size: 2.5%; block-size: 100%; background: var(--gp-ink); }
.glass-page--profile .gp-profile-stylus label { display: grid; gap: 8px; margin-block: 14px; color: var(--gp-muted); line-height: 1.55; }
.glass-page--profile .gp-profile-stylus input { inline-size: 100%; accent-color: var(--gp-ink); }
.glass-page--profile .gp-profile-hand > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 640px) {
  .glass-page--profile .gp-profile-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .glass-page--profile .gp-profile-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .glass-page--profile .gp-profile-archive, .glass-page--profile .gp-profile-device { padding: 14px; }
  .glass-page--profile .gp-profile-identity { align-items: flex-start; }
  .glass-page--profile .gp-profile-setting-row .gp-action, .glass-page--profile .gp-profile-hand > div:last-child, .glass-page--profile .gp-profile-hand > div:last-child .gp-action { inline-size: 100%; }
  .glass-page--profile .gp-profile-hand > div:first-child { inline-size: 100%; }
}