:root { --background:#f4f7f8; --foreground:#18313d; --font-sans:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif; }
* { box-sizing:border-box; }
html { background:var(--background); }
body { margin:0; background:radial-gradient(circle at 12% 0%,rgba(168,222,228,.32),transparent 28rem),linear-gradient(180deg,#f8fbfb 0%,#eef3f4 100%); color:var(--foreground); font-family:var(--font-sans); }
button { font:inherit; }
.site-shell { min-height:100vh; padding:28px 0 56px; }
.screen-controls { width:min(1180px,calc(100% - 32px)); margin:0 auto 18px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.brand { margin:0 0 3px; color:#2d97a8; font-size:12px; font-weight:800; letter-spacing:.18em; }
.screen-controls h1 { margin:0; font-size:30px; letter-spacing:.03em; }
.screen-controls p:last-child { margin:7px 0 0; color:#60757e; font-size:13px; }
.ad-slot { display:grid; place-items:center; border:1px dashed #ccdade; border-radius:10px; background:rgba(255,255,255,.5); color:#9aabb0; font:700 8px/1 Arial,sans-serif; letter-spacing:.18em; }
.ad-slot-header { width:468px; height:60px; flex:0 0 468px; }
.ad-slot-footer { width:min(970px,calc(100% - 32px)); height:90px; margin:8px auto 0; }
.tool-nav { width:min(1180px,calc(100% - 32px)); margin:0 auto 12px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.tool-nav a { border:1px solid #d5e4e7; border-radius:999px; background:rgba(255,255,255,.78); color:#456872; padding:7px 13px; font-size:10px; font-weight:800; text-decoration:none; }
.tool-nav a:hover,.tool-nav a:focus-visible { border-color:#73bdc9; background:#fff; color:#237f90; }
.chart-tabs { width:min(1180px,calc(100% - 32px)); margin:0 auto 20px; display:grid; grid-template-columns:repeat(5,minmax(150px,1fr)); gap:8px; overflow-x:auto; padding-bottom:4px; }
.chart-tabs button { min-width:150px; height:42px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border:1px solid #d4e0e3; border-radius:12px; background:rgba(255,255,255,.72); color:#5c7179; padding:3px 6px; cursor:pointer; }
.chart-tabs button b { font-size:10px; line-height:1.05; white-space:nowrap; }
.chart-tabs button small { color:#7d9299; font-size:8.5px; font-weight:700; line-height:1.05; white-space:nowrap; }
.chart-tabs button.active small { color:inherit; }
.chart-tabs button.active { color:#163944; border-color:var(--tone); background:var(--tone-soft); box-shadow:inset 0 -3px var(--tone); }
.chart-tabs [data-tone="aqua"] { --tone:#3eabbc; --tone-soft:#e4f6f8; }
.chart-tabs [data-tone="mint"] { --tone:#60aa91; --tone-soft:#e8f5ef; }
.chart-tabs [data-tone="lavender"] { --tone:#8e86c8; --tone-soft:#efedfa; }
.chart-tabs [data-tone="peach"] { --tone:#d99a72; --tone-soft:#fbefe7; }
.chart-tabs [data-tone="rose"] { --tone:#c98593; --tone-soft:#faecef; }
.chart-viewport { width:100%; overflow:auto; overscroll-behavior-inline:contain; padding:0 16px 24px; -webkit-overflow-scrolling:touch; }
.chart-sheet { --tone:#3eabbc; --tone-dark:#237f90; --tone-soft:#e4f6f8; --tone-pale:#f5fbfc; width:1540px; min-width:1540px; height:1080px; margin:0 auto; padding:18px 18px 12px; background:#fff; border:1px solid color-mix(in srgb,var(--tone) 48%,#dce5e7); box-shadow:0 18px 55px rgba(43,74,81,.15); }
.chart-sheet[data-tone="mint"] { --tone:#60aa91; --tone-dark:#3d806b; --tone-soft:#e8f5ef; --tone-pale:#f6fbf8; }
.chart-sheet[data-tone="lavender"] { --tone:#8e86c8; --tone-dark:#645ca1; --tone-soft:#efedfa; --tone-pale:#f9f8fd; }
.chart-sheet[data-tone="peach"] { --tone:#d99a72; --tone-dark:#a86a47; --tone-soft:#fbefe7; --tone-pale:#fff9f5; }
.chart-sheet[data-tone="rose"] { --tone:#c98593; --tone-dark:#9c5968; --tone-soft:#faecef; --tone-pale:#fff8f9; }
.chart-header { margin-bottom:14px; }
.chart-title-row { height:48px; display:grid; grid-template-columns:64px 1fr 128px; align-items:center; color:white; background:linear-gradient(90deg,var(--tone-dark),var(--tone)); border-radius:9px 9px 3px 3px; padding:0 16px 0 10px; }
.chart-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.92); color:var(--tone-dark); font-family:Arial,sans-serif; font-size:13px; font-weight:900; }
.chart-title-row h2 { position:sticky; left:50vw; width:max-content; margin:0; transform:translateX(-50%); text-align:center; font-size:20px; letter-spacing:.04em; z-index:2; }
.rank-chip { justify-self:end; border:1px solid rgba(255,255,255,.7); border-radius:999px; padding:5px 10px; font-size:10px; font-weight:800; letter-spacing:.08em; }
.chart-header>p { margin:0; padding:7px; overflow:visible; text-align:left; background:var(--tone-soft); color:var(--tone-dark); font-size:12px; font-weight:700; letter-spacing:.03em; }
.chart-header>p span { position:sticky; left:50vw; display:block; width:max-content; max-width:calc(100vw - 24px); transform:translateX(-50%); text-align:center; white-space:normal; }
.chart-grid { height:916px; display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:auto 1fr; gap:12px 14px; }
.score-block { width:100%; border-collapse:collapse; table-layout:fixed; font-variant-numeric:tabular-nums; }
.score-block.block-1,.score-block.block-2,.score-block.block-3 { grid-row:1/3; }
.score-block.block-4,.score-block.block-5 { grid-row:1; }
.score-block th,.score-block td { border:1px solid #cfdcdf; height:20px; padding:0 3px; text-align:center; line-height:19px; white-space:nowrap; }
.score-block thead th { height:24px; background:var(--tone-dark); color:white; font-size:11px; font-weight:800; }
.score-block thead th:first-child { width:48px; }
.score-block tbody th { background:var(--tone-soft); color:var(--tone-dark); font-size:12px; font-weight:900; }
.score-block tbody td { background:#fff; color:#17333c; font-family:Arial,sans-serif; font-size:13px; font-weight:600; }
.score-block tbody tr:nth-child(even) td { background:var(--tone-pale); }
.score-block tbody tr.unavailable td { color:#9cacb1; font-weight:400; }
.score-block tbody tr.unavailable th { color:#7e969d; background:#f0f4f5; }
.setup-panel { grid-column:4/6; grid-row:2; min-height:244px; position:relative; overflow:hidden; border:1px solid color-mix(in srgb,var(--tone) 55%,white); border-radius:10px; background:linear-gradient(135deg,var(--tone-pale),#fff 70%); padding:12px 16px 10px; }
.setup-panel::after { content:"202"; position:absolute; right:18px; bottom:-24px; color:var(--tone-soft); font:900 92px/1 Arial,sans-serif; letter-spacing:-.08em; z-index:0; }
.setup-panel>* { position:relative; z-index:1; }
.setup-kicker { color:var(--tone-dark); font:800 10px/1 Arial,sans-serif; letter-spacing:.18em; }
.setup-panel h2 { margin:4px 0 2px; color:var(--tone-dark); font-size:16px; }
.setup-lead { margin:0 0 4px; color:#506b73; font-size:10px; }
.setup-section-title { display:inline-block; margin:1px 0 3px; border-radius:999px; background:var(--tone-dark); color:#fff; padding:2px 7px; font-size:8px; font-weight:800; letter-spacing:.08em; }
.setup-section-title.two-title { margin-top:5px; }
.setup-examples { display:grid; grid-template-columns:1fr 1fr; gap:3px 7px; }
.setup-examples div { border-left:3px solid var(--tone); background:rgba(255,255,255,.82); padding:3px 6px; color:#183943; font:700 9.5px/1.15 Arial,var(--font-sans); }
.setup-examples.two-darts div { color:var(--tone-dark); background:var(--tone-soft); }
.setup-foot { margin:5px 0 0; color:#5b6f75; font-size:8.5px; line-height:1.35; }
.chart-footer { height:26px; display:grid; grid-template-columns:1fr 1.6fr auto; align-items:end; gap:18px; color:#64787e; font-size:8px; letter-spacing:.01em; }
.chart-footer span:nth-child(2) { text-align:center; }
.chart-footer span:last-child { color:var(--tone-dark); font-weight:900; }
@media (max-width:900px) { .site-shell{padding-top:18px}.screen-controls{align-items:flex-start;flex-direction:column;gap:14px}.screen-controls h1{font-size:24px}.screen-controls p:last-child{max-width:300px;line-height:1.6}.ad-slot-header{width:100%;height:70px;flex-basis:70px}.ad-slot-footer{width:calc(100% - 16px);height:80px}.tool-nav{width:calc(100% - 16px);justify-content:flex-start}.chart-tabs{width:calc(100% - 16px);margin-left:8px;margin-right:8px;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.chart-tabs button{min-width:0}.chart-tabs button b{font-size:9px}.chart-tabs button small{font-size:7.5px}.chart-title-row h2{font-size:15px}.chart-header>p{font-size:10px}.chart-viewport{padding-left:8px;padding-right:8px}.chart-sheet{margin:0} }
@media print { @page{size:A3 landscape;margin:6mm} html,body{background:#fff!important}.site-shell{padding:0}.screen-controls,.tool-nav,.chart-tabs,.ad-slot{display:none!important}.chart-viewport{width:auto;overflow:visible;padding:0}.chart-sheet{width:408mm;min-width:408mm;height:285mm;margin:0;box-shadow:none;print-color-adjust:exact;-webkit-print-color-adjust:exact} }