.explore-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr); gap: 22px; align-items: start; }
.explore-layout .card { min-width: 0; }
.model-visual { width: 100%; display: block; background: #f5fbff; border-radius: 18px; touch-action: none; }
.model-controls { text-align: left; }
.model-controls label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 10px; }
.model-controls input[type="checkbox"] { width: 20px; height: 20px; accent-color: #5369d7; flex-shrink: 0; }
.model-controls input[type="range"] { width: 100%; padding: 0; accent-color: #5369d7; margin: 8px 0 20px; }
body[data-explore="lineaer"] #a { accent-color: #d94a4a; }
body[data-explore="lineaer"] #b { accent-color: #25a77c; }
body[data-explore="lineaer"] #x { accent-color: #e29a35; }
.model-controls input[type="number"], .model-controls select { width: 100%; font: inherit; padding: 10px; border: 2px solid #b5cddd; border-radius: 12px; background: white; color: #214b72; margin-bottom: 18px; }
.model-value { background: #e9edff; border-radius: 14px; padding: 16px; margin: 14px 0; font-size: 21px; font-weight: bold; overflow-wrap: anywhere; }
.model-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.model-actions button { padding: 10px 14px; }
body[data-explore="lineaer"] #reset { margin-top: 18px; background: #ffe0b5; border-color: #fff2df; }
body[data-explore="lineaer"] #reset:hover { background: #ffd39a; }
.model-note { min-height: 48px; font-weight: bold; color: #477b8f; }
.model-history { padding-left: 22px; line-height: 1.8; }
.model-visual text { font-family: 'Trebuchet MS', Arial, sans-serif; fill: #214b72; }
.drag-handle { cursor: grab; }
.stat-dot { cursor: grab; }
body:is([data-explore="sandsynlighed"], [data-explore="cirkel"]) .model-actions { margin-top: 18px; }
body:is([data-explore="sandsynlighed"], [data-explore="cirkel"]) #reset { background: #ffe0b5; border-color: #fff2df; }
body[data-explore="sandsynlighed"] #run, body[data-explore="cirkel"] #arrange { background: #d8f3df; border-color: #effaf2; }
body[data-explore="sandsynlighed"] #stop { background: #ffd6d6; }
body[data-explore="sandsynlighed"] #frequencies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
body[data-explore="sandsynlighed"] #frequencies p { font-size: 14px; margin: 0; padding: 8px; background: #eef5ff; border-radius: 10px; }
.median-middle { color: #b82f3f; background: #ffe4e8; border-radius: 5px; padding: 2px 4px; }
.ratio-control { position: relative; padding-bottom: 16px; }
.ratio-control #factor { margin-bottom: 12px; }
.ratio-neutral { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 12px; font-weight: bold; color: #477b8f; }
.ratio-neutral::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 2px); height: 8px; width: 2px; background: #477b8f; }
.ratio-dimensions { padding-top: 10px; }
.stat-dot:focus-visible circle { stroke: #214b72; stroke-width: 3; }
body[data-explore="procent"] #first { accent-color: #25a77c; }
body[data-explore="procent"] #second { accent-color: #e29a35; }
body[data-explore="statistik"] #number { accent-color: #e29a35; }
body:is([data-explore="procent"], [data-explore="maalestok"], [data-explore="statistik"]) #reset { margin-top: 18px; background: #ffe0b5; border-color: #fff2df; }
body:is([data-explore="procent"], [data-explore="maalestok"], [data-explore="statistik"]) #reset:hover { background: #ffd39a; }
body[data-explore="procent"] #opposite { margin-top: 18px; background: #d8f3df; border-color: #effaf2; }
body[data-explore="procent"] #opposite:hover { background: #c4ebcf; }
.weight-piece { cursor: grab; touch-action: none; }
.weight-piece.dragging { cursor: grabbing; opacity: .85; }
.weight-piece:focus-visible rect, #divide-drop:focus-visible rect { stroke: #214b72; stroke-width: 4; }
.weight-drop { fill: transparent; stroke: none; }
.weight-drop.drop-ready { fill: transparent; stroke: none; }
body[data-explore="vaegt"] #reset { background: #ffe0b5; }
body[data-explore="vaegt"] .explore-layout { display: block; max-width: 850px; margin: auto; }
.weight-stage { position: relative; }
.weight-intro { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; border-radius: 26px; background: #e8f5fbd9; }
.weight-intro[hidden] { display: none; }
.weight-intro > div { width: min(100%, 580px); max-height: 100%; overflow-y: auto; padding: 26px; border: 3px solid white; border-radius: 22px; background: #fafdff; box-shadow: 0 14px 36px #214b7226; }
.weight-intro button { background: #5369d7; color: white; }
.weight-intro #read-intro { display: block; margin-top: 12px; background: #ffe0b5; color: #214b72; }
body[data-explore="vaegt"] .model-controls { padding: 14px 8px; }
.weight-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width: 600px) { .weight-stage:has(.weight-intro:not([hidden])) { min-height: 410px; } .weight-intro { padding: 10px; } .weight-intro > div { padding: 14px; font-size: 14px; } .weight-intro h2 { font-size: 21px; } }
@media(max-width: 850px) { .explore-layout { grid-template-columns: 1fr; } }