:root { color-scheme: light; }
  body { font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; background:#f5f6f8; color:#171717; }
  input { font-family:inherit; }
  .wrap { max-width: 1050px; margin: 36px auto; padding: 0 20px; }
  .card { background:white; border-radius:18px; padding:24px; box-shadow:0 8px 30px rgba(0,0,0,.08); margin-bottom:18px; }
  h1 { margin:0 0 8px; font-size:28px; }
  .sub { color:#666; margin-bottom:22px; }
  .inputs { display:flex; gap:12px; align-items:end; flex-wrap:wrap; }
  label { font-size:13px; font-weight:650; display:block; margin-bottom:6px; }
  input { width:150px; padding:11px 12px; border:1px solid #ccc; border-radius:10px; font-size:16px; background:white; color:#111; }
  .operator { font-size:25px; padding-bottom:8px; }
  .result { margin-left:auto; text-align:right; }
  .result .big { font-size:34px; font-weight:800; }
  .result .small { color:#666; }
  canvas { width:100%; height:390px; display:block; }
  .charts-scroll { overflow-x:auto; }
  .charts-scroll:focus-visible { outline:2px solid #6d5dfc; outline-offset:4px; }
  .charts { display:grid; grid-template-columns:minmax(300px, 1fr) clamp(260px, 32vw, 360px); gap:24px; }
  .charts h2 { font-size:17px; margin:0 0 16px; }
  .curve-panel { min-width:0; }
  .pie-panel { border-left:1px solid #e2e2e2; padding-left:24px; text-align:center; }
  .pie { --percentage:75%; position:relative; box-sizing:border-box; width:calc(100% - 64px); max-width:280px; aspect-ratio:1; margin:40px auto; border:1px solid #a3a3ad; border-radius:50%; background:conic-gradient(from var(--hour-angle,24.545454545deg), #6d5dfc 0% var(--percentage), #e2e2e9 var(--percentage) 100%); }
  .pie::before { content:""; position:absolute; inset:-10px; border-radius:50%; background:repeating-conic-gradient(from -.5deg, #777783 0deg 1deg, transparent 1deg 30deg); mask:radial-gradient(circle closest-side,transparent calc(100% - 6px),#000 calc(100% - 6px)); pointer-events:none; }
  .clock-number { position:absolute; z-index:2; color:#555560; font-size:clamp(10px,1.5vw,14px); font-weight:400; line-height:1; transform:translate(-50%,-50%); }
  .clock-twelve { left:50%; top:-23px; }
  .clock-three { left:calc(100% + 23px); top:50%; }
  .clock-six { left:50%; top:calc(100% + 23px); }
  .clock-nine { left:-23px; top:50%; }
  .clock-hand { position:absolute; z-index:3; left:50%; bottom:50%; filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); transform-origin:50% 100%; pointer-events:none; }
  .clock-hand::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#292934 0%,#565663 48%,#292934 100%); clip-path:polygon(50% 0,100% 18%,80% 100%,20% 100%,0 18%); }
  .hour-hand { width:4px; height:28%; margin-left:-2px; transform:rotate(var(--hour-angle,24.545454545deg)); }
  .minute-hand { width:2px; height:39%; margin-left:-1px; transform:rotate(var(--hand-angle,294.545454545deg)); }
  .clock-readout { color:#555560; font-size:13px; margin:0 0 18px; }
  .clock-readout strong { display:block; font-size:23px; font-variant-numeric:tabular-nums; color:#292934; margin-top:4px; }
  .clock-pin { position:absolute; z-index:4; left:50%; top:50%; box-sizing:border-box; width:5px; height:5px; border-radius:50%; background:#292934; border:1px solid #fff; transform:translate(-50%,-50%); }
  .pie.is-invalid .clock-hand,.pie.is-invalid .clock-pin { display:none; }
  .clock-seconds { position:absolute; z-index:1; left:50%; bottom:50%; height:50%; width:0; border-left:2px dotted #9693a3; transform-origin:0 100%; transform:rotate(var(--second-angle,339.545454545deg)); pointer-events:none; }
  .pie.is-empty .clock-seconds { bottom:0; height:100%; transform-origin:0 50%; }
  .pie.is-full .clock-seconds,.pie.is-invalid .clock-seconds { display:none; }
  .pie.is-invalid { background:#e2e2e9; }
  .pie-value { font-size:28px; font-weight:800; margin:0 0 14px; }
  .pie-legend { display:grid; gap:8px; font-size:13px; text-align:left; }
  .pie-legend b { float:right; margin-left:10px; }
  .selected-dot { background:#6d5dfc; }
  .remaining-dot { background:#e2e2e9; }
  .pie-note { font-size:13px; line-height:1.5; color:#666; }
  .purple-text { color:#5b4be0; }
  .yellow-text { color:#967000; }
  .red-text { color:#b42318; }
  .coverage-explorer { padding:18px; margin:20px 0; background:#fff; border:1px solid #ded9ff; border-radius:12px; }
  .reading .coverage-explorer h4 { margin:0 0 14px; }
  .coverage-controls { display:flex; gap:16px; align-items:end; flex-wrap:wrap; }
  .coverage-controls input { width:130px; box-sizing:border-box; }
  .coverage-modes { margin-bottom:18px; }
  .coverage-modes button { font:inherit; text-align:left; }
  .coverage-conclusion { margin:16px 0; padding:16px; background:#f4f1ff; border:1px solid #ded9ff; border-radius:10px; }
  .reading .coverage-conclusion h4 { color:#5b4be0; margin-bottom:10px; }
  .coverage-conclusion p { margin:0 0 10px; }
  .coverage-plot { display:block; width:100%; max-width:640px; height:auto; margin:12px auto; }
  .coverage-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; font-size:13px; }
  .coverage-stats strong { display:block; font-size:19px; color:#5b4be0; font-variant-numeric:tabular-nums; }
  .coverage-explorer .control-note:last-child { margin-bottom:0; }
  @media(max-width:500px) { .coverage-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .clt-figure { margin:24px auto; max-width:738px; }
  .clt-figure img { display:block; width:100%; height:auto; }
  .clt-figure figcaption { margin-top:12px; font-size:13px; line-height:1.5; color:#555; }
  .clt-theorem { margin-top:24px; padding:20px; border:1px solid #ded9ff; border-radius:12px; background:#f7f6ff; }
  .clt-equation { overflow-x:auto; padding:16px 0 24px; }
  .clt-equation math { font-size:clamp(20px,3vw,28px); }
  math { font-family:'Cambria Math','STIX Two Math','STIXGeneral',math; }
  .formula-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
  .formula-card { background:#fff; border:1px solid #ded9ff; border-radius:10px; padding:18px; margin:16px 0; overflow-x:auto; }
  .formula-grid .formula-card { margin:0; }
  .formula-label { display:block; color:#555; font-size:13px; margin-bottom:16px; }
  .formula-card math { font-size:clamp(22px,3vw,28px); padding:8px 0; color:#282238; }
  .reading h4 { margin:28px 0 10px; font-size:17px; line-height:1.5; }
  .refresher-examples { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:16px 0; }
  .refresher-examples article { padding:18px; background:white; border:1px solid #ded9ff; border-radius:10px; }
  .refresher-examples h4 { margin:0 0 12px; color:#5b4be0; }
  .refresher-examples p:last-child { margin-bottom:0; }
  .math-reference { border-top:1px solid #ded9ff; margin-top:20px; padding-top:16px; }
  .math-reference summary { cursor:pointer; font-weight:700; color:#5b4be0; margin-bottom:16px; }
  @media(max-width:700px) { .refresher-examples { grid-template-columns:minmax(0,1fr); } }
  @media(max-width:600px) { .formula-grid { grid-template-columns:minmax(0,1fr); } }
  .guide .clt-symbols { font-size:13px; color:#555; margin-bottom:0; }
  .curve-panel .stats { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:18px; }
  .curve-panel .legend { gap:10px 16px; }
  .clock-readouts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
  .clock-readouts .clock-readout { margin:0; }
  .clock-explanation { margin-top:24px; padding-top:20px; border-top:1px solid #e2e2e2; }
  .clock-explanation h3 { margin:0 0 10px; font-size:16px; text-align:left; }
  .clock-explanation-copy { display:block; }
  .clock-explanation .pie-note { margin:0; text-align:left; }
  @media(max-width:700px) { .clock-explanation-copy { grid-template-columns:1fr; gap:12px; } }
  @media(max-width:800px) { .charts { gap:12px; } .pie-panel { padding-left:12px; } .pie-legend b { float:none; display:block; margin:3px 0 0 15px; } }
  .guide { line-height:1.65; }
  .guide h2 { margin:0 0 8px; font-size:24px; line-height:1.3; }
  .guide h3 { margin:0 0 8px; font-size:17px; }
  .guide p { margin:0 0 12px; }
  .guide-intro { color:#555; max-width:760px; }
  .reading { background:#f3f1ff; border:1px solid #ded9ff; border-radius:12px; padding:20px; margin:20px 0 24px; }
  .area-strip { display:flex; height:24px; border-radius:6px; overflow:hidden; background:#e2e2e9; margin-top:18px; }
  .strip-tail { background:#e2e2e9; }
  .strip-center { background:#6d5dfc; }
  button { font:inherit; cursor:pointer; }
  button:focus-visible, input:focus-visible, summary:focus-visible { outline:3px solid #5b4be0; outline-offset:3px; }
  .percentage-controls { margin-top:24px; border-top:1px solid #eee; padding-top:20px; }
  .percentage-controls h2 { margin:0 0 14px; font-size:17px; }
  .presets.grade-presets { gap:5px; }
  .presets.grade-presets button { display:flex; align-items:center; gap:5px; min-width:0; min-height:28px; padding:4px 7px; border-radius:6px; font-size:11px; line-height:1.4; justify-content:center; }
  .grade-presets strong { font-size:12px; }
  .presets,.region-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .presets button,.region-controls button { padding:9px 12px; border:1px solid #d5d1e4; border-radius:9px; background:#fff; color:#393344; }
  .presets button[aria-pressed="true"] { background:#f0ecff; border-color:#6d5dfc; }
  .region-controls button[aria-pressed="true"] { background:#fff2c8; border-color:#ae7500; }
  .region-controls { font-size:13px; }
  .control-note { color:#666; font-size:13px; line-height:1.6; }
  .region-description { min-height:1.6em; margin:8px 0 20px; font-size:14px; color:#675020; }
  .stat #interpretation { font-size:15px; line-height:1.5; }
  .walking-example { border:1px solid #ded9ff; border-radius:12px; padding:16px; margin-top:20px; font-size:14px; line-height:1.6; }
  .walking-example summary { font-weight:700; cursor:pointer; }
  .walking-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:24px; align-items:start; margin:24px 0; padding-top:24px; border-top:1px solid #eee; }
  .walking-layout .walking-example { margin-top:0; }
  .walking-layout .walking-example summary { margin-bottom:12px; }
  .walking-layout .example-inputs { margin:16px 0; }
  .example-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; gap:12px; }
  .example-inputs input { width:100%; box-sizing:border-box; }
  .walk-result { color:#5b4be0; font-weight:700; }
  .pie-highlight { position:absolute; inset:0; border-radius:50%; background:var(--region-highlight,transparent); pointer-events:none; }
  .area-strip { height:32px; }
  .area-strip button { min-width:0; flex-shrink:0; padding:0; border:0; position:relative; }
  .area-strip button[aria-pressed="true"] { box-shadow:inset 0 0 0 3px #bd8100; }
  .area-strip button:focus-visible { outline-offset:-4px; }
  #curve,.pie { cursor:crosshair; }
  .guide .strip-caption { font-size:12px; color:#555; margin:8px 0 0; }
  .guide-grid { display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:24px; overflow-x:auto; }
  .guide-grid:focus-visible { outline:2px solid #6d5dfc; outline-offset:4px; }
  .guide-grid p { color:#444; }
  .guide .guide-context { border-top:1px solid #e2e2e2; padding-top:18px; margin:12px 0 0; font-size:14px; color:#555; }
  .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
  .stat { border:1px solid #e2e2e2; border-radius:12px; padding:13px; }
  .stat b { display:block; font-size:19px; margin-top:4px; }
  .legend { display:flex; flex-wrap:wrap; gap:14px; font-size:13px; margin-top:8px; color:#555; }
  .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; }
  .reference { width:100%; border-collapse:collapse; }
  .reference th,.reference td { padding:11px; text-align:left; border-bottom:1px solid #eee; }
  @media(max-width:700px){ .stats{grid-template-columns:1fr 1fr}.result{margin-left:0;text-align:left;width:100%} canvas{height:320px;} }

  .error { color: #b42318; margin: 14px 0 0; }
  input[aria-invalid="true"] { border-color: #b42318; }
  @media(max-width:400px) { .wrap { padding:0 10px; } .card { padding:16px; } input { width:120px; } .reference th,.reference td { padding:7px; font-size:13px; } }
  @media(max-width:760px) {
    .walking-layout { grid-template-columns:minmax(0,1fr); }
    .charts { grid-template-columns:minmax(0,1fr); gap:24px; }
    .charts-scroll { overflow:visible; }
    .pie-panel { min-width:0; border-left:0; border-top:1px solid #e2e2e2; padding:24px 0 0; }
    .guide-grid { grid-template-columns:minmax(0,1fr); overflow:visible; }
    .pie-legend { max-width:320px; margin:auto; }
    .pie-legend b { float:right; display:inline; margin:0 0 0 10px; }
    .clock-readouts { max-width:360px; margin:0 auto 18px; }
  }

.coverage-example { margin-bottom:16px; padding:14px; background:#fff; border-radius:8px; }
.coverage-example > strong { display:block; margin-bottom:8px; }
.coverage-example p:last-child { margin-bottom:0; color:#5b4be0; }