:root{color:#112a50;font-synthesis:none;text-rendering:optimizelegibility;background:#f4f7fa;font-family:Inter,Noto Sans JP,Hiragino Sans,Yu Gothic UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}button{font:inherit}body{background:#f4f7fa;min-width:320px}.app-shell{min-height:100vh}.app-header{z-index:10;background:#fff;border-bottom:1px solid #dfe6ed;align-items:center;gap:12px;min-height:72px;padding:12px clamp(16px,3vw,38px);display:flex;position:sticky;top:0}.brand-mark{color:#fff;letter-spacing:-.04em;background:#0d3476;border-radius:11px;place-items:center;width:42px;height:42px;font-weight:800;display:grid}.app-header h1{letter-spacing:.01em;margin:0;font-size:18px;line-height:1.2}.app-header p{color:#6b7a8d;margin:3px 0 0;font-size:12px}.header-actions{gap:8px;margin-left:auto;display:flex}.icon-button{color:#173560;cursor:pointer;background:#fff;border:1px solid #ccd7e2;border-radius:10px;align-items:center;gap:7px;min-height:42px;padding:0 13px;display:inline-flex}.workspace{grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"canvas distance";align-items:start;gap:18px;width:min(1540px,100%);margin:0 auto;padding:clamp(12px,2vw,26px);display:grid}.canvas-column,.distance-card{background:#fff;border:1px solid #dde5ec;border-radius:16px;box-shadow:0 8px 26px #162c4a0f}.canvas-column{grid-area:canvas}.distance-card{grid-area:distance;position:sticky;top:90px}.settings-drawer{z-index:50;position:fixed;top:132px;right:0;transform:translate(100%)}.settings-drawer.open{transform:none}.drawer-body{background:#fff;border:1px solid #dde5ec;border-right:0;border-radius:16px 0 0 16px;gap:16px;width:min(340px,88vw);max-height:calc(100vh - 152px);padding:18px;display:grid;overflow-y:auto;box-shadow:0 8px 26px #162c4a24}.drawer-handle{color:#173560;cursor:pointer;background:#fff;border:1px solid #dde5ec;border-right:0;border-radius:10px 0 0 10px;flex-direction:column;align-items:center;gap:7px;width:40px;padding:12px 0;display:flex;position:absolute;top:10px;left:-40px;box-shadow:-4px 4px 14px #162c4a1a}.drawer-handle span{writing-mode:vertical-rl;letter-spacing:.14em;font-size:12px;font-weight:700}.canvas-column{overflow:hidden}.canvas-toolbar{border-bottom:1px solid #e2e8ee;align-items:center;gap:12px;min-height:58px;padding:9px 13px;display:flex}.legend{color:#526477;flex-wrap:wrap;align-items:center;gap:8px 15px;font-size:12px;display:flex}.legend span{white-space:nowrap;align-items:center;gap:6px;display:inline-flex}.legend .legend-scale svg{flex:none}.swatch{border-radius:3px;width:19px;height:12px;display:inline-block}.swatch.theory{background:#22aaa173}.swatch.dead{background:repeating-linear-gradient(45deg,#ef6f6873 0 3px,#ef6f6824 3px 6px)}.dot{border-radius:50%;width:13px;height:13px;display:inline-block}.dot.team-a{background:#123f86;border:2px solid #9bb5de}.dot.team-b{background:#0f5f63;border:2px solid #9ccfd0;border-radius:3px}.dot.contact{background:#fff;border:2px solid #ff6a28}.zoom-controls{border:1px solid #d4dee7;border-radius:9px;align-items:center;margin-left:auto;display:inline-flex;overflow:hidden}.zoom-controls button{color:#173560;cursor:pointer;background:#fff;border:0;place-items:center;width:38px;height:36px;display:grid}.zoom-controls span{text-align:center;min-width:50px;font-size:13px}.canvas-wrap{touch-action:none;background:#f7fafc;position:relative}.canvas-vertical{height:clamp(650px,100vh - 175px,880px)}.canvas-horizontal{height:clamp(470px,100vh - 175px,720px)}.court-svg{-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.canvas-hint{color:#4e6177;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;background:#ffffffeb;border:1px solid #b9c7d5d9;border-radius:9px;width:max-content;max-width:calc(100% - 24px);padding:9px 14px;font-size:12px;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.canvas-hint.is-cta{color:#0d3476;font-weight:700}.player-marker{cursor:grab}.player-marker:active{cursor:grabbing}.marker-body{transform-box:fill-box;transform-origin:50%}.is-dragging .marker-body{transform:scale(1.08)}.select-ring{opacity:0;transform-box:fill-box;transform-origin:50%;transform:scale(.82)}.select-ring.on{opacity:1;transform:scale(1)}.is-dragging .select-ring{stroke-dasharray:.16 .12}.pulse-ring{opacity:0;transform-box:fill-box;transform-origin:50%}.court-face{fill-opacity:.82}.court-face.is-idle{fill-opacity:.74}.player-label,.contact-label{paint-order:stroke;stroke:#fff;stroke-width:.2px;stroke-linejoin:round;fill:#173560;font-size:.56px;font-weight:800}.ruler-num{paint-order:stroke;stroke:#fff;stroke-width:.14px;stroke-linejoin:round}.measure-label{paint-order:stroke;stroke:#fff;stroke-width:.16px;stroke-linejoin:round}.ruler-grab{cursor:grab}.ruler-grab:active{cursor:grabbing}.is-active .player-label,.contact-label{fill:#e64e16}.control-grid{gap:15px;display:grid}.control-label,.eyeline{color:#617287;margin-bottom:7px;font-size:12px;font-weight:700;display:block}.segmented{border:1px solid #cbd6e1;border-radius:9px;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.segmented button{color:#304964;cursor:pointer;background:#fff;border:0;min-height:43px;padding:0 10px}.segmented button+button{border-left:1px solid #cbd6e1}.segmented button.selected{color:#fff;background:#0e3476;font-weight:800}.preset-panel{border-top:1px solid #e2e8ee;gap:13px;padding-top:16px;display:grid}.preset-block .control-label{margin-bottom:7px}.preset-grid{gap:7px;display:grid}.preset-grid.cols-2{grid-template-columns:1fr 1fr}.preset-grid.cols-3{grid-template-columns:1fr 1fr 1fr}.preset-grid button{color:#304964;cursor:pointer;background:#fff;border:1px solid #cbd6e1;border-radius:9px;min-height:38px;padding:0 8px;font-size:13px}.preset-grid button:hover{color:#0e3476;border-color:#0e3476}.preset-grid button:active{background:#eef3f9}.preset-grid button.selected{color:#fff;background:#0e3476;border-color:#0e3476;font-weight:800}.preset-note{color:#7a899a;margin:0;font-size:11.5px;line-height:1.6}.premise-panel,.slots-panel{border-top:1px solid #e2e8ee;padding-top:14px}.premise-input{width:100%;min-height:40px;font:inherit;color:#112a50;border:1px solid #cbd6e1;border-radius:9px;padding:0 11px;font-size:13px}.premise-input:focus-visible{outline-offset:1px;outline:3px solid #1f84da66}.slot-row{gap:6px;margin-top:7px;display:flex}.slot-row button{color:#304964;cursor:pointer;background:#fff;border:1px solid #cbd6e1;border-radius:9px;min-height:38px;font-size:12.5px}.slot-load{text-overflow:ellipsis;white-space:nowrap;color:#0e3476;flex:1;min-width:0;padding:0 10px;font-weight:700;overflow:hidden}.slot-mini{flex:none;padding:0 9px;font-size:11.5px}.slot-mini.danger{color:#b23c17}.slot-empty{color:#617287;border-style:dashed;flex:1;padding:0 10px}.premise-chip{color:#fff;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;background:#0d3476e6;border-radius:999px;max-width:calc(100% - 90px);padding:6px 11px;font-size:12px;font-weight:700;position:absolute;top:12px;left:12px;overflow:hidden}.export-button{color:#173560;cursor:pointer;background:#fffffff0;border:1px solid #ccd7e2;border-radius:12px;place-items:center;width:42px;height:42px;display:grid;position:absolute;bottom:12px;right:12px;box-shadow:0 4px 14px #162c4a1f}.course-label{paint-order:stroke;stroke:#fff;stroke-width:.14px;stroke-linejoin:round}.undo-toast{z-index:60;color:#fff;background:#112a50;border-radius:12px;align-items:center;gap:12px;padding:11px 16px;font-size:13px;display:flex;position:fixed;bottom:22px;left:50%;transform:translate(-50%);box-shadow:0 10px 28px #112a5059}.undo-toast button{color:#fff;cursor:pointer;background:0 0;border:1px solid #ffffff80;border-radius:8px;padding:5px 11px;font-size:12.5px;font-weight:700}.status-panel,.instruction-panel{border-top:1px solid #e2e8ee;padding-top:16px}.status-panel strong{font-size:16px;display:block}.status-panel p{color:#617287;margin:8px 0 0;font-size:13px;line-height:1.6}.distance-card{padding:18px}.distance-card .eyeline{margin-bottom:4px}.distance-card h2{margin:0 0 13px;font-size:18px}.distance-group{border-top:1px solid #dce5ee;padding-top:10px}.distance-group+.distance-group{margin-top:6px}.distance-shooter{color:#087f82;letter-spacing:.02em;margin:0;font-size:12px;font-weight:800}.distance-row{padding:10px 0}.distance-row+.distance-row{border-top:1px dashed #e2eaf1}.distance-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.distance-head strong{color:#0d3476;font-size:14px}.distance-badge{color:#fff;white-space:nowrap;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700}.distance-badge.tier-cover{background:#0f5f63}.distance-badge.tier-stretch{background:#0d3476}.distance-badge.tier-open{background:#e64e16}.distance-side{margin-top:7px}.distance-side-head{align-items:center;gap:8px;margin-bottom:5px;display:flex}.distance-course{color:#617287;min-width:52px;font-size:12px;font-weight:700}.distance-value{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:16px;font-weight:800}.distance-side-head .distance-badge{margin-left:auto}.distance-bar{background:#e6edf3 repeating-linear-gradient(90deg,#0000 0 calc(11.5% - 1px),#c9d6e2 calc(11.5% - 1px) 11.5%);border-radius:4px;height:8px;overflow:hidden}.distance-bar i{border-radius:4px;height:100%;display:block}.distance-bar i.tier-cover{background:#428f91}.distance-bar i.tier-stretch{background:#0d3476}.distance-bar i.tier-open{background:#ff6a28}.distance-empty{color:#617287;border-top:1px solid #dce5ee;margin:0;padding:12px 0 4px;font-size:13px;line-height:1.6}.distance-card small{color:#7a899a;margin-top:10px;line-height:1.5;display:block}.instruction-panel h3{margin:0 0 9px;font-size:15px}.instruction-panel ol{color:#576a80;margin:0;padding-left:20px;font-size:13px;line-height:1.85}button:focus-visible,.player-marker:focus-visible{outline-offset:2px;outline:3px solid #1f84da66}@media (width<=900px){.workspace{grid-template-columns:1fr;grid-template-areas:"canvas""distance"}.distance-card{position:static}.canvas-vertical{height:700px}}@media (width<=620px){.app-header{min-height:60px;padding:8px 12px}.brand-mark{border-radius:9px;width:36px;height:36px;font-size:13px}.app-header h1{font-size:15px}.app-header p{display:none}.header-actions .icon-button{justify-content:center;width:40px;padding:0;font-size:0}.workspace{gap:8px;padding:8px}.drawer-body{gap:12px;padding:12px}.control-grid{grid-template-columns:1fr;gap:10px}.control-block{grid-template-columns:66px 1fr;align-items:center;display:grid}.control-label{margin:0}.segmented button{min-height:39px}.distance-card{border-radius:12px;padding:12px}.distance-card h2{font-size:16px}.canvas-toolbar{align-items:flex-start}.legend{gap:6px 10px}.zoom-controls{flex:none}.canvas-vertical{height:650px}.canvas-horizontal{height:390px}.canvas-hint{padding:7px 9px;font-size:10px;bottom:8px}}@media (prefers-reduced-motion:no-preference){button{transition:background-color .16s,color .16s,border-color .16s,transform .16s}button:active{transform:scale(.98)}.settings-drawer{transition:transform .24s}.select-ring{transition:opacity .16s ease-out,transform .16s cubic-bezier(.2,.9,.3,1)}.marker-body{transition:transform .12s ease-out}.zone-layer{animation:.18s ease-out zoneIn}.court-face{transition:fill-opacity .24s}.distance-bar i{transition:width 90ms linear}.pulse-ring{animation:1.1s ease-out 2 pulse}}@keyframes zoneIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.45)}}