/* Så fungerar en öppen fyra */
.guide-content a,.guide-content a:hover,.guide-content p a:not(.button),.guide-content li a:not(.button){text-decoration:none}
.of-figure{margin:18px 0;max-width:100%}
.of-figure figcaption{font-size:14px;color:#535c70;margin-top:8px}
.of-row,.of-col{display:flex;width:max-content;max-width:100%;border-left:1px solid #bcc7da;border-top:1px solid #bcc7da;background:#fff}
.of-col{flex-direction:column}
.of-cell{width:46px;height:46px;flex:none;display:grid;place-items:center;border:0;border-right:1px solid #bcc7da;border-bottom:1px solid #bcc7da;background:#fff;font:900 26px/1 Nunito,sans-serif;position:relative;padding:0;color:inherit}
.of-edge{width:10px;flex:none;background:repeating-linear-gradient(45deg,#171d33 0 3px,#fff 3px 6px);border-bottom:1px solid #bcc7da}
.of-cell.of-letter{background:#e3f4e8;box-shadow:inset 0 0 0 3px #1f7a45;color:#155c34;font-size:20px}
.of-grid{display:grid;border-left:1px solid #bcc7da;border-top:1px solid #bcc7da;width:max-content;max-width:100%;background:#fff}
.of-cols-6{grid-template-columns:repeat(6,46px)}.of-cols-7{grid-template-columns:repeat(7,46px)}
.of-grid .of-cell{width:auto}
.of-cell.of-point{background:#e3f4e8;box-shadow:inset 0 0 0 3px #1f7a45}
.of-tag{display:inline-block;margin:8px 0 0;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:800;background:#e8edf7;color:#171d33}
.of-figure.good .of-tag{background:#d9f0e1;color:#155c34}.of-figure.bad .of-tag{background:#fde2de;color:#9b2b1d}
.of-pair{display:flex;flex-wrap:wrap;gap:8px 32px;align-items:flex-start}
.of-sequence{display:grid;gap:4px;margin:12px 0}
.of-sequence .of-figure{margin:6px 0}.of-sequence figcaption{display:none}
.of-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:20px 0}
.of-cards>div{padding:16px;border:1px solid #cbd5e1;border-radius:12px;background:#f7f8fc}
.of-cards h3{margin-top:0}.of-cards .of-cell{width:38px;height:38px;font-size:22px}
.of-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.of-chip{display:inline-block;padding:4px 10px;border-radius:8px;background:#171d33;color:#fff;font:800 15px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
.of-join{color:#535c70;font-weight:700}
.of-acronym{display:grid;gap:10px;margin:16px 0}
.of-acronym div{display:grid;grid-template-columns:220px 1fr;gap:6px 16px;padding:12px 16px;border:1px solid #cbd5e1;border-radius:12px;background:#f7f8fc}
.of-acronym dt{font-weight:800;display:flex;align-items:center;gap:10px}
.of-acronym dt b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#254bff;color:#fff;flex:none}
.of-acronym dd{margin:0;align-self:center}
/* Vinstpunkter: pulserande ring + ringform (inte bara färg) */
.of-cell.of-ring{background:#e3f4e8}
.of-cell.of-ring::after{content:'';position:absolute;inset:7px;border:3px solid #1f7a45;border-radius:50%;animation:of-pulse 1.4s ease-in-out infinite}
@keyframes of-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.78);opacity:.55}}
.of-cell.of-win{background:#d6eddb;box-shadow:inset 0 0 0 2px #1f7a45}
.of-cell.of-fresh{box-shadow:inset 0 0 0 3px #171d33}
.of-cell.of-ghost{color:#9b2b1d;opacity:.6;font-style:italic}
.of-live button.of-cell{cursor:pointer}
.of-live button.of-cell:hover{background:#f0f2fc}
.of-live button.of-cell:focus-visible{outline:3px solid #254bff;outline-offset:-3px}
.of-steps{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.learning-widget .of-step[aria-pressed=true],.of-answers [aria-pressed=true]{background:#171d33;color:#fff;border-color:#171d33}
.learning-widget .button:disabled{opacity:.5}
.of-status,.of-count{min-height:28px;color:#302584;font-weight:700;margin-top:12px}
.of-count{color:#171d33}
.of-compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:16px}
.of-compare-card{padding:16px;border:1px solid #cbd5e1;border-radius:12px;background:#fff}
.of-compare-card h4{margin:0 0 10px;font-size:17px}
.of-compare-card .of-cell{width:38px;height:38px;font-size:22px}
.of-compare-card .button{margin-top:4px}
.of-board{display:grid;grid-template-columns:repeat(7,1fr);width:100%;max-width:420px;aspect-ratio:1;border-left:1px solid #aebcd0;border-top:1px solid #aebcd0;background:#fff;margin:12px 0;touch-action:manipulation}
.of-board .of-cell{width:auto;height:auto;font-size:clamp(16px,5vw,28px)}
.of-board.of-fixed{overflow:hidden}
.of-board .axis-h::before{content:'';position:absolute;inset:3px;border:3px solid #254bff}
.of-board .axis-v::before{content:'';position:absolute;inset:8px;border:3px dashed #c25a00}
.of-board .axis-h.axis-v::before{border:3px solid #254bff;inset:3px}
.of-board .axis-h.axis-v{outline:3px dashed #c25a00;outline-offset:-10px}
.of-legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px}
.of-legend li{display:flex;align-items:center;gap:8px}
.of-swatch{width:26px;height:18px;flex:none}
.of-swatch.axis-h{border:3px solid #254bff}.of-swatch.axis-v{border:3px dashed #c25a00}
.of-ring-key{width:20px;height:20px;border:3px solid #1f7a45;border-radius:50%;flex:none}
@media(prefers-reduced-motion:reduce){.of-cell.of-ring::after{animation:none}}
@media(max-width:700px){.of-cell{width:clamp(28px,9.5vw,40px);height:clamp(28px,9.5vw,40px);font-size:20px}.of-cards .of-cell,.of-compare-card .of-cell{width:clamp(28px,9.5vw,38px);height:clamp(28px,9.5vw,38px)}.of-cols-6{grid-template-columns:repeat(6,clamp(28px,9.5vw,40px))}.of-grid .of-cell{height:clamp(28px,9.5vw,40px)}.of-acronym div{grid-template-columns:1fr}.of-board{max-width:none}.of-cell.of-ring::after{inset:4px}}
@media(max-width:420px){.of-live .of-cell{width:clamp(26px,8.6vw,36px);height:clamp(26px,8.6vw,36px)}}
@media(max-width:700px){.of-live .of-cell{flex:0 1 auto;min-width:0;height:auto;aspect-ratio:1}.of-live{max-width:100%}}
.of-board{aspect-ratio:auto}
.of-board .of-cell{aspect-ratio:1}
.learning-widget .of-answers [aria-pressed=true]:disabled{opacity:1}
@media(max-width:700px){.of-steps .button{flex:1 1 auto;padding-inline:12px}}