/* Layout: single reading column (max 720px), stacked "stations" a student works through top to bottom on a phone. */ :root{ --bg:#eef2f6; --paper:#ffffff; --ink:#1b2430; --muted:#5f6b7a; --line:#dbe2ea; --accent:#20508a; --accent-soft:#e1eaf5; --inf:#d9ead3; --pres:#b6d7a8; --past:#93c47d; --adj:#f4cce0; --time:#c9e0f8; --ok:#2e7d4f; --ok-soft:#dcf1e4; --no:#b3392f; --no-soft:#f9dfdc; --display:"Jost",system-ui,sans-serif; --body:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif; } @media (max-width:0px){:root:not([data-theme="light"]){ --bg:#12171d; --paper:#1a2129; --ink:#e6ebf1; --muted:#9aa6b4; --line:#2c3642; --accent:#8db6ee; --accent-soft:#1f2e42; --inf:#3a4d33; --pres:#466a38; --past:#5a8a45; --adj:#5c3248; --time:#29435f; --ok:#76d39b; --ok-soft:#1d3a2a; --no:#f29a8f; --no-soft:#422220; color-scheme:dark}} :root[data-theme="dark"]{ --bg:#12171d; --paper:#1a2129; --ink:#e6ebf1; --muted:#9aa6b4; --line:#2c3642; --accent:#8db6ee; --accent-soft:#1f2e42; --inf:#3a4d33; --pres:#466a38; --past:#5a8a45; --adj:#5c3248; --time:#29435f; --ok:#76d39b; --ok-soft:#1d3a2a; --no:#f29a8f; --no-soft:#422220; color-scheme:dark} *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--body)} .wrap{max-width:720px;margin:0 auto;padding-inline:16px;padding-block:24px 80px;display:flex;flex-direction:column;gap:18px} header .eyebrow{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700} h1{font:400 clamp(2rem,6vw,2.8rem)/1.1 var(--display);letter-spacing:-.01em;margin:6px 0 8px;text-wrap:balance} header p{margin:0;color:var(--muted)} .progress{display:flex;gap:6px;margin-top:14px} .progress span{flex:1;height:6px;border-radius:9px;background:var(--line)} .progress span.on{background:var(--accent)} section.station{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px 18px} .station h2{font:500 1.35rem/1.2 var(--display);margin:0 0 4px;display:flex;gap:10px;align-items:baseline} .station h2 .n{font:600 .85rem var(--body);color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:1px 9px} .station .lead{color:var(--muted);margin:0 0 14px;font-size:.95rem} /* word bank */ .groups{display:flex;flex-direction:column;gap:14px} .grp h3{font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 6px} .cards{display:flex;flex-wrap:wrap;gap:8px} .card{border:1px solid #111;background:#111;color:#fff;border-radius:10px;padding:10px 14px;font:inherit;cursor:pointer;min-width:96px;min-height:48px;text-align:center;transition:background .2s,border-color .2s} .card .sv{display:none;font-size:1.2rem;font-weight:500} .card .en{font-size:.85rem} .card.flip{background:#e8f6e3;border-color:#bfe0b4;color:#1c2b18;animation:flipin .25s ease} .mine{margin:6px 0 12px;font-weight:500;color:var(--muted)}.mine b{color:var(--ink)} .card.flip .sv{display:inline}.card.flip .en{display:none} @keyframes flipin{0%{transform:rotateY(90deg)}100%{transform:rotateY(0)}} /* reading */ .key{display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem;margin-bottom:14px} .key span{border-radius:6px;padding:2px 8px} .tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap} .tabs button{font:inherit;font-size:.9rem;border:1px solid var(--line);background:none;color:var(--ink);border-radius:99px;padding:4px 14px;cursor:pointer} .tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--paper)} .text{font-size:1.15rem;line-height:1.9} .text .w{cursor:pointer;border-radius:4px;padding:0 2px} .text .w:hover{outline:1px dashed var(--muted)} .inf{background:var(--inf)}.pres{background:var(--pres)}.past{background:var(--past)}.adj{background:var(--adj)}.time{background:var(--time)}.ett{font-style:italic} .gloss{min-height:1.6em;margin-top:10px;color:var(--accent);font-weight:700} [hidden]{display:none!important}.listen{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.listen audio{flex:1;min-width:220px;height:40px}#slow[aria-pressed=true]{background:var(--ink,#222);color:var(--bg,#fff)} .btn{font:inherit;font-weight:500;border:0;border-radius:10px;padding:9px 16px;background:var(--accent);color:var(--paper);cursor:pointer} .btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)} /* cloze */ .cloze{display:flex;flex-direction:column;gap:12px} .cl{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .cl input{font:inherit;width:9.5em;border:0;border-bottom:2px solid var(--line);background:none;color:var(--ink);padding:2px 4px} .cl input:focus{outline:none;border-color:var(--accent)} .cl .hint{color:var(--muted);font-size:.85rem} .cl.ok input{border-color:var(--ok);color:var(--ok);font-weight:700} .cl.no input{border-color:var(--no);color:var(--no)} .score{margin-top:12px;font-weight:700} /* writing */ label.q{display:block;font-weight:700;margin:12px 0 4px} input.ans,textarea{width:100%;font:inherit;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg);color:var(--ink)} textarea{min-height:150px;resize:vertical} .helpers{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .chip{font-size:.82rem;border-radius:99px;padding:2px 10px;border:1px solid var(--line);color:var(--muted)} .chip.got{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)} .remember{background:var(--accent-soft);border-radius:12px;padding:12px 14px;font-size:.95rem} .linkbtn{font:inherit;background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer} .checks label{display:flex;gap:10px;align-items:flex-start;padding:5px 0} .checks input{width:20px;height:20px;accent-color:var(--accent);margin-top:3px} .send{position:sticky;bottom:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 18px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 -6px 24px rgba(20,40,70,.08)} .send p{margin:0;font-size:.9rem;color:var(--muted);max-width:28em} .toast{color:var(--ok);font-weight:700} footer{text-align:center;color:var(--muted);font-size:.8rem} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} .opts{display:flex;flex-direction:column;gap:12px} .opt{display:flex;flex-direction:column;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--line)} .opt:last-child{border-bottom:0} .opt .s{font-size:1.05rem}.opt .s b{letter-spacing:.05em} .opt .h{color:var(--muted);font-size:.85rem} .pills{display:flex;gap:8px;flex-wrap:wrap} .pills label{position:relative} .pills input{position:absolute;opacity:0;pointer-events:none} .pills span{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:5px 14px;cursor:pointer;background:var(--bg)} .pills input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--paper)} .pills input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px} .opt.ok .pills input:checked+span{background:var(--ok);border-color:var(--ok)} .opt.no .pills input:checked+span{background:var(--no);border-color:var(--no)} .opt .why{display:none;font-size:.85rem;color:var(--muted)}.opt.no .why,.opt.ok .why{display:block} .rule{background:var(--accent-soft);border-radius:12px;padding:12px 14px;font-size:.95rem;margin-bottom:14px} .rule table{border-collapse:collapse;margin-top:6px;width:100%}.rule td{padding:2px 8px 2px 0;vertical-align:top} .rule td:first-child{color:var(--muted);white-space:nowrap} .checkrow{margin-top:14px;display:flex;gap:10px;align-items:center} :root{--still:#ffd9a8;--move:#c4561a} @media (max-width:0px){:root:not([data-theme="light"]){--still:#6b4416;--move:#f0a36b}} :root[data-theme="dark"]{--still:#6b4416;--move:#f0a36b} .still{background:var(--still)} .move{box-shadow:inset 0 -3px 0 var(--move);background:color-mix(in srgb,var(--still) 35%,transparent)} .trick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px} .trick>div{border-radius:12px;padding:12px 14px;font-size:.95rem} .trick .m{border:2px solid var(--move)}.trick .s{background:var(--still)} .trick b.big{display:block;font-size:1.05rem;margin-bottom:4px} .trick .ex{display:block;margin-top:6px;font-style:italic} @media (max-width:480px){.trick{grid-template-columns:1fr}} .note{font-size:.85rem;color:var(--muted);margin-top:8px} a.back{display:inline-block;color:var(--muted);text-decoration:none;font-size:.9rem;margin-bottom:4px}a.back:hover{color:var(--accent)} /* library */ .lib-level{display:flex;flex-direction:column;gap:12px} .lib-level>h2{font:500 1.1rem/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 0 0} a.hw{display:block;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s} a.hw:hover{border-color:var(--accent);transform:translateY(-1px)} a.hw .tag{font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} a.hw h3{font:500 1.3rem/1.2 var(--display);margin:4px 0 6px} a.hw p{margin:0;color:var(--muted);font-size:.95rem} .hwwrap{position:relative} .hwwrap a.hw{padding-bottom:58px} .donebtn{position:absolute;right:16px;bottom:14px;font:inherit;font-size:.85rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--muted);cursor:pointer} .donebtn .tick{display:inline-block;width:1.1em;height:1.1em;line-height:1.1em;text-align:center;border-radius:50%;border:1px solid var(--line);margin-right:4px;color:transparent} .hwwrap.done .donebtn{background:#e3f4e8;border-color:#3a8a5a;color:#2a6b44} .hwwrap.done .donebtn .tick{background:#3a8a5a;border-color:#3a8a5a;color:#fff} .hwwrap.done a.hw{border-color:#8cc9a2;box-shadow:inset 4px 0 0 #3a8a5a} a.hw .started{display:none;margin-left:10px;font-size:.75rem;padding:2px 8px;border-radius:999px;background:var(--line);color:var(--muted)} .hwwrap.isstarted a.hw .started{display:inline-block} .lib-level h2 .donecount{text-transform:none;letter-spacing:0;font-size:.85rem;color:#3a8a5a} a.hw .go{display:inline-block;margin-top:12px;font-weight:500;color:var(--accent)} .soon{color:var(--muted);font-size:.95rem;text-align:center;margin:8px 0} /* ---- design v2: day/dark mode, bigger card and rule text ---- */ :root{--bg:#f3f4f1;--paper:#ffffff;--line:#dfe3e7;--card:#1f2a36;--card-ink:#ffffff;--flip:#e6f4df;--flip-line:#bcdcae;--flip-ink:#1c2b18} @media (max-width:0px){:root:not([data-theme="light"]){--bg:#15181c;--paper:#21262d;--line:#343d48;--card:#3b4654;--card-ink:#f3f5f7;--flip:#d9efd0;--flip-line:#9fcf8c;--flip-ink:#14210f}} :root[data-theme="dark"]{--bg:#15181c;--paper:#21262d;--ink:#e6ebf1;--muted:#a3aebb;--line:#343d48;--accent:#8db6ee;--accent-soft:#25344a; --inf:#3a4d33;--pres:#466a38;--past:#5a8a45;--adj:#5c3248;--time:#29435f;--ok:#76d39b;--ok-soft:#1d3a2a;--no:#f29a8f;--no-soft:#422220; --still:#6b4416;--move:#f0a36b;--card:#3b4654;--card-ink:#f3f5f7;--flip:#d9efd0;--flip-line:#9fcf8c;--flip-ink:#14210f;color-scheme:dark} :root[data-theme="light"]{color-scheme:light} body{background:var(--bg);transition:background .2s,color .2s} section.station{box-shadow:0 1px 2px rgba(20,30,40,.04)} .card{background:var(--card);border-color:var(--card);color:var(--card-ink);padding:12px 16px;min-height:52px} .card .en,.card .sv{font-size:1.1rem} .card .en{font-weight:400}.card .sv{font-weight:500} .card.flip{background:var(--flip);border-color:var(--flip-line);color:var(--flip-ink);animation:flipfade .2s ease} @keyframes flipfade{from{opacity:.4}to{opacity:1}} .card .sv{letter-spacing:.01em} .station .lead{font-size:1.02rem} .rule,.remember{font-size:1.06rem;line-height:1.7} .rule td{padding:4px 10px 4px 0} .trick>div{font-size:1.06rem;line-height:1.6} .opt .h{font-size:.92rem}.opt .why{font-size:.92rem} .note{font-size:.92rem} .key{font-size:.85rem} .theme-toggle{position:absolute;top:14px;right:14px;z-index:20;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.08)} .theme-toggle:hover{border-color:var(--accent)} header{padding-right:48px} .send .btns{display:flex;gap:8px;flex-wrap:wrap} @media print{ body{background:#fff!important;color:#000!important;font-size:12pt} *{-webkit-print-color-adjust:exact;print-color-adjust:exact} .theme-toggle,.send,.show,.prompt,.checkrow .btn,#reset,a.back,.progress,.kofi,#savenote,.tabs{display:none!important} .wrap{max-width:none;padding:0} section.station{border:1px solid #ccc;box-shadow:none;break-inside:auto;page-break-inside:auto} .rule,.opt,.cl,.rwi,.card-q,.hotels{break-inside:avoid} .card{background:#fff!important;color:#000!important;border:1px solid #999!important;min-height:0;padding:4px 8px} .card .sv,.card .en{display:inline!important;font-size:10pt}.card .sv::after{content:" – "} textarea,input.ans,.rwi input{border:1px solid #999!important;background:#fff!important} details.model p{display:block} } /* basics: en/ett colours, italics for ett-words everywhere, sentence builder */ :root{--enc:#e3dcf7;--ettc:#ffe1b6} @media (max-width:0px){:root:not([data-theme="light"]){--enc:#d9cff5;--ettc:#ffd9a3}} :root[data-theme="dark"]{--enc:#d9cff5;--ettc:#ffd9a3} .text .w.ett,.text.plain .w.ett,.ettw{font-style:italic!important} .text.show-enett .w.en{background:var(--enc)!important;color:#221a3a!important} .text.show-enett .w.ett{background:var(--ettc)!important;color:#3a2610!important} .key .en{background:var(--enc);color:#221a3a}.key .ett{background:var(--ettc);color:#3a2610;font-style:italic} #key[data-mode=enett] span:not(.en):not(.ett){display:none} #key[data-mode=verbs] .en,#key[data-mode=verbs] .ett{display:none} #show button[data-show=enett]{background:linear-gradient(90deg,var(--enc) 50%,var(--ettc) 50%);border-color:var(--enc);color:#221a3a} #builder{display:flex;flex-direction:column;gap:12px} .brow .blab{font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .bout{background:var(--accent-soft);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start} .bout .bsv{font-size:1.3rem;font-weight:500}.bout .ben{color:var(--muted)} h3.sub{font:500 1.1rem var(--display);margin:22px 0 4px} .rule{overflow-x:auto} a.kofi{color:var(--accent);text-decoration:none;font-weight:500}a.kofi:hover{text-decoration:underline} a.kofi.big{display:inline-block;border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:8px 16px} header p a{color:var(--accent)} /* comparatives: adjective show mode, hotel table, cards */ .text.show-adj .w.adj{background:var(--adj)!important;color:var(--adj-ink)!important} #key[data-mode=adj] span:not(.adj){display:none} #show button[data-show=adj]{background:var(--adj);border-color:var(--adj);color:#2b1a22} #show button[data-show=adj].on{background:var(--adj)} .hotels{overflow-x:auto;margin:4px -4px 0;padding:0 4px} .hotels table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem} .hotels th,.hotels td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .hotels thead th{font-weight:600;background:var(--accent-soft)} .hotels tbody th{font-weight:500;color:var(--ink)} .hotels small{display:block;font-weight:400;font-size:.78rem;color:var(--muted)} .card-q{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:12px;background:var(--bg)} .card-q label.q{margin-top:0}.card-q label.q small{display:block;font-weight:400;color:var(--muted);font-size:.9rem;margin-top:2px} /* v3: coloured show buttons, light-pink adjectives, highlights in rule boxes */ #show button[data-show=verbs]{background:var(--pres);border-color:var(--pres)} #show button[data-show=time]{background:var(--time);border-color:var(--time)} #show button[data-show=order]{border:2px solid #6a8fc7} #show button.on{color:var(--ink);box-shadow:0 0 0 2px var(--ink);font-weight:600} #show button[data-show=verbs].on{background:var(--pres)}#show button[data-show=time].on{background:var(--time)} #show button[data-show=order].on{background:var(--paper)} .hl{border-radius:5px;padding:1px 5px;font-style:normal} .text.plain .w{color:inherit!important} :root{--adj-ink:inherit} @media (max-width:0px){:root:not([data-theme="light"]){--adj:#f3c6dc;--adj-ink:#2b1a22}} :root[data-theme="dark"]{--adj:#f3c6dc;--adj-ink:#2b1a22} .adj{color:var(--adj-ink)} /* show buttons + plain text + word order */ .show{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px} .show button{font:inherit;font-size:.92rem;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:99px;padding:6px 14px;cursor:pointer} .show button.on{background:var(--accent);border-color:var(--accent);color:var(--paper)} .prompt{background:var(--accent-soft);border-radius:10px;padding:9px 13px;font-size:.98rem;margin-bottom:14px} .text.plain .w{background:none!important;font-style:normal!important} .text.show-verbs .w.inf,.text.show-all .w.inf{background:var(--inf)!important} .text.show-verbs .w.pres,.text.show-all .w.pres{background:var(--pres)!important} .text.show-verbs .w.past,.text.show-all .w.past{background:var(--past)!important} .text.show-time .w.time,.text.show-all .w.time{background:var(--time)!important} .text.show-all .w.adj{background:var(--adj)!important} .text.show-all .w.ett{font-style:italic!important} .text.show-order{display:flex;flex-direction:column;gap:16px;line-height:2.1} .text.show-order .pos1{border:2px solid #6a8fc7;border-radius:8px;padding:2px 5px;position:relative} .text.show-order .pos2{background:var(--past);border-radius:6px;padding:2px 5px;position:relative;font-weight:500} .text.show-order .pos1::before,.text.show-order .pos2::before{position:absolute;top:-12px;left:-6px;font-size:.68rem;font-weight:600;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:99px;padding:0 6px;line-height:1.4;white-space:nowrap} .text.show-order .pos1::before{content:"1"}.text.show-order .pos2::before{content:"2"} #key[data-mode=verbs] .adj,#key[data-mode=verbs] .time,#key[data-mode=verbs] .ett,#key[data-mode=time] span:not(.time){display:none} .text.show-order .w.sa{font-style:italic!important;color:var(--muted)} .rule table.order{margin:8px 0 10px}.rule table.order th{text-align:left;font-size:.8rem;color:var(--muted);font-weight:600;padding:0 10px 2px 0} .rule+.rule{margin-top:10px} .ilg{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 14px;margin:12px 0 2px;font-size:1.05rem} .ilg .wd{display:inline-flex;flex-direction:column;align-items:flex-start} .ilg .wd small{font-size:.72rem;letter-spacing:.06em;color:var(--muted,#888);margin-top:3px} .ilg .wd small.g{text-transform:uppercase} .ilg .unit{display:inline-flex;gap:14px;border-bottom:3px solid var(--pres);padding-bottom:3px} .text.show-all .w.en{box-shadow:inset 0 -3px 0 var(--enc)} .text.show-all .w.ett{box-shadow:inset 0 -3px 0 var(--ettc)} .text.show-all .w.adj{color:var(--adj-ink)!important} #show button[data-show=all]{background:linear-gradient(90deg,var(--inf),var(--pres),var(--past),var(--time),var(--adj));border-color:var(--pres);color:#1d2a1d!important;font-weight:500} .text .w.sw,.text.plain .w.sw{background:#fff3b0!important;color:#3a3000!important;border-radius:4px} .text.plain.hide-saved .w.sw{background:none!important;color:inherit!important} .text.show-verbs .w.sw.pres,.text.show-all .w.sw.pres{background:var(--pres)!important}.text.show-verbs .w.sw.inf,.text.show-all .w.sw.inf{background:var(--inf)!important}.text.show-verbs .w.sw.past,.text.show-all .w.sw.past{background:var(--past)!important} #show .savedtog{background:#fff3b0;border-color:#e8d36a;color:#3a3000} #show .savedtog.off{background:transparent;color:var(--muted);border-color:var(--line,#ccc)} .tabs.big button{font-size:1.02rem;padding:10px 18px} textarea#note{width:100%;min-height:90px} #printtexts{display:none} @media print{#printtexts{display:block}#printtexts+*{}#text,#tabs,#show,#key,#gloss,.prompt{display:none!important}#printtexts .ptitle{margin:14px 0 4px;font-size:1rem}#printtexts .text{break-inside:avoid}} .send{position:static!important;margin-top:18px} .sendto{flex-basis:100%;display:flex;flex-direction:column;gap:6px} .sendto label{font-size:.85rem;color:var(--muted)} .sendrow{display:flex;gap:8px;flex-wrap:wrap} .sendrow input{flex:1 1 180px;font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:inherit} .sendmsg{font-size:.9rem;color:var(--ok,#3a8a5a);min-height:1.2em} :root{--fab:#f4a259;--fap:#4fbdb0} .text.show-fa .w.fab,.text.show-all .w.fab,.text.plain.show-fa .w.fab{background:var(--fab)!important;color:#2b1700!important} .text.show-fa .w.fap,.text.show-all .w.fap,.text.plain.show-fa .w.fap{background:var(--fap)!important;color:#00241f!important} .key .fab{background:var(--fab);color:#2b1700}.key .fap{background:var(--fap);color:#00241f} #key[data-mode=fa] span:not(.fab):not(.fap){display:none} #key[data-mode=verbs] .fab,#key[data-mode=verbs] .fap,#key[data-mode=time] .fab,#key[data-mode=time] .fap{display:none} #show button[data-show=fa]{background:linear-gradient(90deg,var(--fab) 50%,var(--fap) 50%);border-color:var(--fab);color:#1d1d1d} .ilg .unit.ub{border-bottom-color:var(--fab)}.ilg .unit.up{border-bottom-color:var(--fap)} :root{--plc:#7fcfc4} .text.show-ng .w.ngn,.text.show-all .w.ngn,.text.plain.show-ng .w.ngn{background:var(--enc)!important;color:#221a3a!important} .text.show-ng .w.ngt,.text.show-all .w.ngt,.text.plain.show-ng .w.ngt{background:var(--ettc)!important;color:#3a2610!important} .text.show-ng .w.ngp,.text.show-all .w.ngp,.text.plain.show-ng .w.ngp{background:var(--plc)!important;color:#00241f!important} .key .ngn{background:var(--enc);color:#221a3a}.key .ngt{background:var(--ettc);color:#3a2610}.key .ngp{background:var(--plc);color:#00241f} #key[data-mode=ng] span:not(.ngn):not(.ngt):not(.ngp){display:none} #key[data-mode=verbs] .ngn,#key[data-mode=verbs] .ngt,#key[data-mode=verbs] .ngp{display:none} #show button[data-show=ng]{background:linear-gradient(90deg,var(--enc) 33%,var(--ettc) 33% 66%,var(--plc) 66%);border-color:var(--enc);color:#1d1d1d} .text.show-pp .w.pp,.text.show-all .w.pp,.text.plain.show-pp .w.pp{background:var(--plc)!important;color:#00241f!important} .text.show-pp .w.pg,.text.show-all .w.pg,.text.plain.show-pp .w.pg{background:var(--enc)!important;color:#221a3a!important} .key .pp{background:var(--plc);color:#00241f}.key .pg{background:var(--enc);color:#221a3a} #key[data-mode=pp] span:not(.pp):not(.pg){display:none} #key[data-mode=verbs] .pp,#key[data-mode=verbs] .pg{display:none} #show button[data-show=pp]{background:linear-gradient(90deg,var(--plc) 50%,var(--enc) 50%);border-color:var(--plc);color:#1d1d1d} .ilg .unit.upp{border-bottom-color:var(--plc)} :root{--mwc:#d8ecff} .text .w.mw{font-weight:700} .text.show-mw .w.mw,.text.show-all .w.mw,.text.plain.show-mw .w.mw{background:var(--mwc)!important;color:#0d2c4a!important} .key .mw{background:var(--mwc);color:#0d2c4a;font-weight:700} #key[data-mode=mw] span:not(.mw){display:none} #key[data-mode=verbs] .mw,#key[data-mode=adj] .mw{display:none} #key[data-mode=adj] span:not(.adj){display:none} #show button[data-show=mw]{background:var(--mwc);border-color:#a9d2f5;color:#0d2c4a;font-weight:700} .text .w.hdw,.text.plain .w.hdw{font-size:1.15em;color:var(--accent)!important;font-weight:400!important} .text .w.hd{display:block;font-weight:400;font-size:1.15em;font-family:var(--display,inherit);letter-spacing:.01em;margin:18px 0 4px;padding-bottom:4px;border-bottom:1px solid var(--line);background:none!important;color:var(--accent)!important} .text .w.lead1{display:block;font-weight:500;font-size:1.08em;margin-bottom:8px} .clen{display:block;flex-basis:100%;font-size:.85rem;color:var(--muted);margin-top:2px} .clnote{margin:18px 0 8px;padding:8px 12px;border-left:4px solid #a9d2f5;font-size:.9rem;color:var(--muted)} .sub{margin:-4px 0 10px;font-size:1.05rem;color:var(--muted)} .credit{font-size:.78rem;color:var(--muted);margin-top:10px} body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} @media (max-width:0px){:root:not([data-theme="light"]) .text{font-weight:300;color:#d4dae2;letter-spacing:.012em}:root:not([data-theme="light"]) .text .w.mw{font-weight:600}:root:not([data-theme="light"]) .text .w.hdw{font-weight:400!important}} :root[data-theme="dark"] .text{font-weight:300;color:#d4dae2;letter-spacing:.012em}:root[data-theme="dark"] .text .w.mw{font-weight:600}:root[data-theme="dark"] .text .w.hdw{font-weight:400!important} .watch{border-left:4px solid var(--fab);padding:8px 12px;margin-top:10px;border-radius:6px;background:var(--paper)} #gloss{display:none} .wpop{position:absolute;z-index:50;min-width:200px;max-width:320px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:0 10px 30px rgba(20,30,50,.22)} .wpop.sheet{position:fixed;left:12px;right:12px;bottom:12px;max-width:none} .wpop .wp-sv{font-weight:600;font-size:1.1rem} .wpop .wp-en{color:var(--muted);margin-top:2px} .wpop .wp-base{font-size:.82rem;color:var(--muted);margin-top:4px} .wpop .wp-btns{display:flex;gap:8px;margin-top:10px} .wpop .wp-btns .btn{padding:8px 16px;font-size:.95rem} .text .w.picked{outline:2px solid var(--accent);outline-offset:1px;border-radius:4px} .gloss .savew{font:inherit;font-size:.85rem;margin-left:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer} .gloss .savew:disabled{border-color:var(--ok,#3a8a5a);color:var(--ok,#3a8a5a);cursor:default} .grp.saved h3::after{content:" ★";color:var(--accent)} .ilg-tr{font-style:italic;color:var(--muted,#888);margin:4px 0 14px} .opt .pills span{border-radius:12px;text-align:left} .rw{display:flex;flex-direction:column;gap:14px} .rwi .q{color:var(--muted);margin-bottom:4px} .rwi input{width:100%;font:inherit;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--bg);color:var(--ink)} .rwi.ok input{border-color:var(--ok);color:var(--ok)}.rwi.no input{border-color:var(--no);color:var(--no)} details.model{margin-top:12px}details.model summary{cursor:pointer;color:var(--accent);font-weight:500}details.model p{background:var(--accent-soft);border-radius:10px;padding:10px 12px;margin:8px 0 0} /* complex past (har + supine) */ :root{--perf:#6fbf9f} @media (max-width:0px){:root:not([data-theme="light"]){--perf:#2f7a62}} :root[data-theme="dark"]{--perf:#2f7a62} .perf{background:var(--perf)} .text.show-verbs .w.perf,.text.show-all .w.perf,.text.show-verbs .w.sw.perf,.text.show-all .w.sw.perf{background:var(--perf)!important} /* ===================================================================== swedishgym.css — design system for homework.swedishgym.se Fonts: Newsreader (content, Swedish, headings) + DM Mono (labels, UI) --------------------------------------------------------------------- HOW TO USE 1. Load this file on every page: 2. Add the class names below to your own HTML. Each component has a copy-paste example in the comment above it. 3. Rules of the design (keep these when building): - Only Swedish words are italic: wrap them in . - Interface labels are DM Mono, in capitals (write them in capitals). - One rounded blue button (.sg-button) per screen. Everything else is text, hairlines or outlined buttons. - Colour never carries meaning alone: statuses and feedback always have words. ===================================================================== */ /* ---------- 1. Tokens ---------- */ :root { /* colour */ --sg-paper: #F7F4EE; /* page background */ --sg-card: #FFFDF9; /* cards */ --sg-white: #FFFFFF; /* inputs, chips */ --sg-ink: #1C1B19; /* main text (15.7:1 on paper) */ --sg-ink-2: #4A4640; /* intro text */ --sg-ink-soft: #5C5750; /* labels, meta (6.5:1) */ --sg-ink-faded: #6F695F; /* earlier lesson text, numbers (4.9:1) */ --sg-line: #E3DDD2; /* hairlines */ --sg-line-strong: #D8D1C4; /* top of lists, chip borders */ --sg-line-input: #CFC7B9; /* outlined buttons */ --sg-accent: #24527A; /* buttons, progress, endings, links */ --sg-accent-hover: #163A59; --sg-accent-tint: #DCE7F2; /* saved words */ --sg-correct: #2E6B3A; --sg-correct-bg: #E2EFDF; --sg-wrong: #A8441C; /* "not quite" underline */ --sg-wrong-text: #7A2F12; /* "not quite" text */ /* type */ --sg-serif: "Newsreader", Georgia, serif; --sg-mono: "DM Mono", ui-monospace, monospace; --sg-text: 21px; /* lesson & body text */ --sg-title: 60px; /* page / module title */ --sg-word: 26px; /* base word on a card ("en bil") */ --sg-answer: 34px; /* answer / result ("bilen") */ --sg-row-title: 24px; /* module titles in the library */ --sg-label: 12px; /* DM Mono caps labels */ /* shape & space */ --sg-radius: 12px; --sg-pill: 999px; --sg-tap: 44px; /* minimum tap target */ --sg-shadow-active: 0 12px 32px rgba(28, 27, 25, 0.10); --sg-shadow-rest: 0 1px 2px rgba(28, 27, 25, 0.04); } @media (max-width: 640px) { :root { --sg-text: 19px; --sg-title: 44px; --sg-word: 22px; --sg-answer: 30px; --sg-row-title: 21px; --sg-label: 11px; } } /* ---------- 2. Base ---------- */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--sg-paper); color: var(--sg-ink); font-family: var(--sg-serif); font-size: var(--sg-text); line-height: 1.6; } a { color: var(--sg-accent); } a:hover { color: var(--sg-accent-hover); } a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--sg-accent); outline-offset: 2px; } button { font: inherit; } .sg-sv { font-style: italic; } /* bilen */ .sg-label { /* DEFINITE FORM */ font-family: var(--sg-mono); font-size: var(--sg-label); letter-spacing: 0.14em; color: var(--sg-ink-soft); } .sg-page { max-width: 820px; margin: 0 auto; padding: 64px 24px 72px; } /* library pages */ .sg-lesson { max-width: 720px; margin: 0 auto; padding: 56px 24px 240px; } /* inside a module */ @media (max-width: 640px) { .sg-page { padding: 36px 20px 40px; } .sg-lesson { padding: 28px 20px 160px; } } .sg-stack { display: flex; flex-direction: column; gap: 30px; } .sg-title { /*

Modules

*/ margin: 0; font-size: var(--sg-title); line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; } .sg-intro { margin: 0; color: var(--sg-ink-2); max-width: 34em; } .sg-only-phone { display: none; } @media (max-width: 640px) { .sg-only-phone { display: revert; } .sg-only-desktop { display: none !important; } } /* ---------- 3. Header ----------
swedishgym
*/ .sg-header { border-bottom: 1px solid var(--sg-line); } .sg-header__inner { max-width: 820px; margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; } .sg-brand { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; color: var(--sg-ink); text-decoration: none; } .sg-nav { display: flex; gap: 28px; font-family: var(--sg-mono); font-size: 13px; letter-spacing: 0.08em; } .sg-nav a { display: inline-flex; align-items: center; min-height: var(--sg-tap); color: var(--sg-ink-soft); text-decoration: none; } .sg-nav a[aria-current="page"] { color: var(--sg-ink); box-shadow: inset 0 -2px 0 var(--sg-ink); } @media (max-width: 640px) { .sg-header__inner { padding: 8px 20px; } .sg-brand { font-size: 22px; } } /* ---------- 4. Tabs: level switch and category filters ---------- Level switch (label on its own line):
SHOW MODULES FOR (after a choice: YOUR LEVEL)
Category filters (same component, with a hairline underneath):
Behaviour: remember the level in localStorage ("sg-level") and accept ?level=a1|a2|b1|all in the URL. Before any choice, show every level and no underline. After a choice, show that level first and fold the others into .sg-level-toggle rows. */ .sg-switch { display: flex; flex-direction: column; gap: 2px; } .sg-tabs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 26px; font-family: var(--sg-mono); font-size: 15px; letter-spacing: 0.08em; } .sg-tabs button { display: inline-flex; align-items: center; gap: 7px; min-height: var(--sg-tap); padding: 0; border: 0; background: transparent; color: var(--sg-ink-soft); font-family: inherit; font-size: inherit; letter-spacing: inherit; cursor: pointer; } .sg-tabs button[aria-pressed="true"] { color: var(--sg-ink); } .sg-tabs button[aria-pressed="true"] .sg-tabs__label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; } .sg-tabs--filters button[aria-pressed="true"] { text-decoration: none; box-shadow: inset 0 -2px 0 var(--sg-ink); } .sg-tabs__count { display: inline-block; font-size: 11px; color: var(--sg-ink-faded); } .sg-tabs--filters { font-size: 13px; gap: 4px 28px; border-bottom: 1px solid var(--sg-line); } @media (max-width: 640px) { .sg-tabs { gap: 0 22px; } .sg-tabs--filters { font-size: 12px; } } /* ---------- 5. Buttons ---------- Continue
*/ .sg-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; box-sizing: border-box; border: 0; border-radius: var(--sg-pill); background: var(--sg-accent); color: var(--sg-white); font-family: var(--sg-mono); font-size: 15px; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; cursor: pointer; } .sg-button:hover { background: var(--sg-accent-hover); color: var(--sg-white); } .sg-button--ghost { background: transparent; color: var(--sg-ink-2); border: 1.5px solid var(--sg-line-input); font-weight: 400; } .sg-button--ghost:hover { background: transparent; color: var(--sg-ink); border-color: var(--sg-ink-soft); } .sg-button--wide { width: 100%; min-height: 56px; } .sg-text-button { min-height: var(--sg-tap); padding: 0; border: 0; background: transparent; color: var(--sg-accent); font-family: var(--sg-mono); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* Phone: pinned main action, within thumb reach */ .sg-actionbar { position: sticky; bottom: 0; padding: 12px 20px 26px; border-top: 1px solid var(--sg-line); background: var(--sg-paper); } /* ---------- 6. Progress line ----------
*/ .sg-progress { height: 3px; background: var(--sg-line); } .sg-progress__bar { height: 3px; background: var(--sg-accent); } /* ---------- 7. Continue card ----------
CONTINUE WHERE YOU LEFT OFF Presens: verbs in the present
A1 · STEP 4 OF 12
Continue →
*/ .sg-continue { background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: var(--sg-radius); padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .sg-continue__text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .sg-continue__title { font-size: 28px; line-height: 1.2; } .sg-continue__meta { display: flex; align-items: center; gap: 14px; margin-top: 6px; min-width: 0; } .sg-continue__meta .sg-progress { flex: 1 1 auto; min-width: 40px; max-width: 280px; } .sg-continue__meta .sg-label { flex: none; white-space: nowrap; } @media (max-width: 640px) { .sg-continue { padding: 18px 20px; flex-direction: column; align-items: stretch; gap: 14px; } .sg-continue__text { flex: none; } .sg-continue__title { font-size: 24px; } .sg-continue .sg-button { width: 100%; } } /* ---------- 8. Library: levels and module rows ----------

LEVEL A1 · 1 of 3 done

(only for "other levels")
  1. 04 Definite form: bilen, huset GRAMMAR · 10 MIN NOT STARTED (data-status: new | progress | done)
Folded level ("other levels"): OTHER LEVELS */ .sg-level { display: flex; flex-direction: column; gap: 10px; animation: sg-appear 260ms ease-out; } .sg-level__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .sg-level__head h2 { margin: 0; font-weight: 400; font-size: 13px; } .sg-level__note { letter-spacing: 0.04em; } .sg-level__hide { font-size: 12px; letter-spacing: 0.1em; text-decoration: none; } .sg-modules { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sg-line-strong); } .sg-modules > li { border-bottom: 1px solid var(--sg-line); } .sg-module { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: baseline; padding: 20px 0 18px; color: var(--sg-ink); text-decoration: none; } .sg-module:hover .sg-module__title { color: var(--sg-accent); } .sg-module__num { font-family: var(--sg-mono); font-size: 13px; color: var(--sg-ink-faded); } .sg-module__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .sg-module__title { font-size: var(--sg-row-title); line-height: 1.25; letter-spacing: -0.005em; } .sg-module__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; font-family: var(--sg-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--sg-ink-soft); } @media (max-width: 640px) { .sg-module { grid-template-columns: 36px minmax(0, 1fr); padding: 16px 0 14px; } .sg-module__num { font-size: 12px; } .sg-module__meta { font-size: 11px; } } /* status mark + word */ .sg-status { display: inline-flex; align-items: center; gap: 8px; color: var(--sg-ink-soft); } .sg-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; /* new: hollow */ } .sg-status[data-status="progress"] { color: var(--sg-accent); } .sg-status[data-status="progress"]::before { /* half filled */ background: linear-gradient(90deg, transparent 50%, currentColor 50%); } .sg-status[data-status="done"] { color: var(--sg-correct); } .sg-status[data-status="done"]::before { background: currentColor; } .sg-level-toggle { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 0; border: 0; border-top: 1px solid var(--sg-line-strong); border-bottom: 1px solid var(--sg-line); background: transparent; color: var(--sg-ink); font-family: var(--sg-mono); font-size: 13px; letter-spacing: 0.12em; text-align: left; cursor: pointer; } .sg-level-toggle__count { color: var(--sg-ink-soft); } .sg-level-toggle__action { flex: none; color: var(--sg-accent); } .sg-empty { margin: 0; padding: 18px 0; border-top: 1px solid var(--sg-line-strong); color: var(--sg-ink-soft); font-size: 18px; } /* ---------- 9. Lesson: text, chips, divider ---------- The module is one page that grows. Each step is appended at the end. - Text in the newest group: .sg-step-text (dark) - Earlier text: add .is-past (faded) - New blocks fade in with .sg-appear and scroll into view.

En words add -en. Your turn: write the definite form of en bok, a book.

*/ .sg-step-text { margin: 0; color: var(--sg-ink); } .sg-step-text.is-past { color: var(--sg-ink-faded); } .sg-chip { font-family: var(--sg-mono); font-size: 0.8em; color: var(--sg-ink); background: var(--sg-white); border: 1px solid var(--sg-line-strong); border-radius: 4px; padding: 1px 7px; margin: 0 2px; white-space: nowrap; } .sg-divider { width: 100%; margin: 18px 0 4px; border: 0; border-top: 1px solid var(--sg-line-strong); } .sg-appear { animation: sg-appear 260ms ease-out; } @keyframes sg-appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---------- 10. Lesson cards: example and exercise ---------- Example (learner presses Show to reveal):
en bil DEFINITE FORM (before reveal) bilen (after; keep the word in its own span)
Exercise:
ett barn
(show only after the first wrong answer)

Not quite. Have another go, or press Hint.

Hint: barn + et ·

Sentence exercise: replace .sg-card__base with Jag har en bil. är röd. and use the label FILL THE GAP. Done exercise: replace the answer row with .sg-result, and add AFTER ANOTHER TRY when it took more than one try. Behaviour: - Enter in the answer box = Check. - Wrong answer: add .is-wrong to .sg-answer, show .sg-feedback, show the Hint button. Keep the feedback visible while the learner edits, until Hint is pressed. - Hint pressed: hide .sg-feedback, show .sg-hint (with "Show the answer"). - Correct: turn the card into the done state, remove .is-active, append the next step. - Comparison ignores case and surrounding spaces. */ .sg-card { background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: var(--sg-radius); padding: 24px 30px; margin: 0 -30px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; box-shadow: var(--sg-shadow-rest); transition: box-shadow 200ms ease; } .sg-card > * { max-width: 100%; } .sg-card.is-active { box-shadow: var(--sg-shadow-active); } .sg-card .sg-answer-row, .sg-card .sg-keys, .sg-card .sg-feedback, .sg-card .sg-hint { align-self: stretch; } .sg-card .sg-button { margin-top: 8px; } .sg-card .sg-answer-row .sg-button { margin-top: 0; } @media (max-width: 640px) { .sg-card { padding: 18px 20px; margin: 0; } } .sg-card__base { font-size: var(--sg-word); font-style: italic; color: var(--sg-ink-soft); } .sg-card__label { margin-top: 6px; } .sg-sentence { font-size: 28px; line-height: 1.4; } .sg-gap { display: inline-block; min-width: 110px; border-bottom: 2px solid var(--sg-ink); } @media (max-width: 640px) { .sg-sentence { font-size: 23px; } .sg-gap { min-width: 84px; } } .sg-result { display: inline-flex; align-items: center; gap: 12px; font-size: var(--sg-answer); font-weight: 500; line-height: 1.3; } .sg-ending { color: var(--sg-accent); } .sg-tick { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--sg-correct); } .sg-tick::after { content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px; border: solid var(--sg-white); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); } .sg-answer-row { display: flex; align-items: center; gap: 12px; } .sg-answer { flex: 1; min-width: 0; min-height: 56px; box-sizing: border-box; padding: 0 4px; border: 0; border-bottom: 2px solid var(--sg-accent); border-radius: 0; background: transparent; font-family: var(--sg-serif); font-size: var(--sg-answer); font-weight: 500; color: var(--sg-ink); } .sg-answer.is-wrong { border-bottom-color: var(--sg-wrong); } .sg-keys { display: flex; gap: 6px; margin-top: 8px; } .sg-keys button { width: var(--sg-tap); height: var(--sg-tap); border: 1px solid var(--sg-line-strong); border-radius: 50%; background: var(--sg-white); color: var(--sg-ink); font-family: var(--sg-serif); font-size: 21px; cursor: pointer; } .sg-feedback { margin: 8px 0 0; color: var(--sg-wrong-text); } .sg-hint { margin: 8px 0 0; font-family: var(--sg-mono); font-size: 15px; color: var(--sg-ink-2); } /* ---------- 11. Motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ---------- 12. Phrase lists, grammar notes, flip tiles ---------- WHEN YOU DON'T UNDERSTAND
NOTE

After kan, the next verb keeps its basic form:

kan du prata (not pratar)
*/ .sg-phrases { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--sg-line-strong); } .sg-phrases > li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sg-line); animation: sg-appear 260ms ease-out; } .sg-phrase__sv { display: block; font-size: 24px; font-weight: 500; line-height: 1.3; color: var(--sg-ink); } .sg-phrase__en { display: block; font-size: 18px; color: var(--sg-ink-soft); } .sg-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sg-line-strong); background: transparent; color: var(--sg-accent); cursor: pointer; } .sg-note { margin-top: 24px; display: flex; flex-direction: column; gap: 6px; } .sg-note__examples { display: flex; flex-direction: column; gap: 2px; font-size: 22px; } .sg-note__wrong { color: var(--sg-ink-soft); font-size: 0.8em; } .sg-tiles { display: flex; flex-wrap: wrap; gap: 10px; } .sg-tile { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 12px 18px; border: 1px solid var(--sg-line-strong); border-radius: 8px; background: var(--sg-card); color: var(--sg-ink); font-family: var(--sg-serif); font-size: 19px; cursor: pointer; } .sg-tile.is-flipped .sg-tile__text { font-style: italic; } .sg-tile__mark { font-family: var(--sg-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--sg-accent); } @media (max-width: 640px) { .sg-phrase__sv { font-size: 21px; } .sg-phrase__en { font-size: 17px; } } /* ===================================================================== New look (Oct 2026): maps the module pages onto swedishgym.css Light is default; dark only with [data-theme="dark"] (never from the OS). ===================================================================== */ /* ---- dark tokens for swedishgym.css ---- */ :root[data-theme="dark"]{ --sg-paper:#171614;--sg-card:#201E1B;--sg-white:#272420; --sg-ink:#ECE7DE;--sg-ink-2:#D6CFC3;--sg-ink-soft:#B4AC9F;--sg-ink-faded:#9C9487; --sg-line:#36322D;--sg-line-strong:#443F38;--sg-line-input:#5A544C; --sg-accent:#9CBDE0;--sg-accent-hover:#C0D6EE;--sg-accent-tint:#25344A; --sg-correct:#8CC79A;--sg-correct-bg:#1E3224;--sg-wrong:#E28A62;--sg-wrong-text:#F2AA87; color-scheme:dark; } :root[data-theme="dark"] .sg-button{color:#10202E} :root[data-theme="dark"] .sg-button:hover{color:#10202E} :root[data-theme="dark"] .sg-button--ghost,:root[data-theme="dark"] .sg-button--ghost:hover{color:var(--sg-ink-2)} /* ---- old module variables -> new palette (light and dark) ---- */ :root,:root[data-theme="light"],:root[data-theme="dark"]{ --bg:var(--sg-paper);--paper:var(--sg-card);--ink:var(--sg-ink);--muted:var(--sg-ink-soft);--line:var(--sg-line); --accent:var(--sg-accent);--accent-soft:var(--sg-accent-tint); --ok:var(--sg-correct);--ok-soft:var(--sg-correct-bg);--no:var(--sg-wrong); --card:var(--sg-white);--card-ink:var(--sg-ink);--flip:var(--sg-accent-tint);--flip-line:var(--sg-accent);--flip-ink:var(--sg-ink); --display:var(--sg-serif);--body:var(--sg-serif); } :root,:root[data-theme="light"]{--no-soft:#F6E4DB} :root[data-theme="dark"]{--no-soft:#3A2419} html{font-size:18px} @media (max-width:640px){html{font-size:17px}} body{background:var(--sg-paper);color:var(--sg-ink);font-family:var(--sg-serif)} /* ---- site header + theme toggle ---- */ .sg-header{padding-right:0} .theme-toggle.in-nav{position:static;width:auto;height:auto;min-height:var(--sg-tap);border:0;border-radius:0;background:transparent;box-shadow:none; font-family:var(--sg-mono);font-size:13px;letter-spacing:.08em;color:var(--sg-ink-soft);cursor:pointer;padding:0;display:inline-flex;align-items:center} .theme-toggle.in-nav:hover{color:var(--sg-ink);border:0} a.back{display:none} /* ---- module page frame ---- */ .wrap{max-width:720px;padding-block:44px 120px;gap:26px} @media (max-width:640px){.wrap{padding:24px 16px 100px;gap:20px}} .wrap > header{padding-right:0;display:flex;flex-direction:column;gap:10px} header .eyebrow{font-family:var(--sg-mono);font-weight:400;font-size:var(--sg-label);letter-spacing:.14em;color:var(--sg-ink-soft)} h1{font-family:var(--sg-serif);font-weight:400;font-size:var(--sg-title);line-height:1.05;letter-spacing:-.02em;margin:0} .wrap > header p{color:var(--sg-ink-2);font-size:var(--sg-text);line-height:1.6;max-width:34em} .wrap > header p.sub{font-family:var(--sg-mono);font-size:13px;letter-spacing:.06em;color:var(--sg-ink-soft)} .progress{display:none} /* sections = cards */ section.station{background:var(--sg-card);border:1px solid var(--sg-line);border-radius:var(--sg-radius);padding:28px 30px;box-shadow:var(--sg-shadow-rest)} @media (max-width:640px){section.station{padding:20px 18px}} .station h2{font:400 30px/1.15 var(--sg-serif);letter-spacing:-.01em;margin:0 0 8px;gap:14px} @media (max-width:640px){.station h2{font-size:25px}} .station h2 .n{font:400 13px var(--sg-mono);color:var(--sg-ink-faded);background:none;border-radius:0;padding:0;letter-spacing:.06em} .station h2 .n::before{content:"0"} .station .lead,.station .lead1{color:var(--sg-ink-2);font-size:1.05rem;line-height:1.6} .sub,h3.sub{font-family:var(--sg-mono);font-weight:400;font-size:var(--sg-label);letter-spacing:.14em;text-transform:uppercase;color:var(--sg-ink-soft)} .prompt{color:var(--sg-ink-2)} /* labels in DM Mono caps */ .grp h3,.key,.mine,.score,.clnote,.helpers .chip,.tag,.credit,footer,#savenote,.checkrow,.opt .h{font-family:var(--sg-mono)} .grp h3{font-weight:400;font-size:var(--sg-label);letter-spacing:.14em;color:var(--sg-ink-soft)} .mine{font-size:13px;letter-spacing:.06em;color:var(--sg-ink-soft)} .mine b{color:var(--sg-accent);font-weight:500} .score{font-size:14px;letter-spacing:.04em} footer{font-size:12px;letter-spacing:.06em;color:var(--sg-ink-soft);text-align:center} footer a{color:var(--sg-accent)} /* rule / explainer boxes */ .rule{background:var(--sg-paper);border:1px solid var(--sg-line);border-radius:10px;padding:18px 20px;font-size:1.02rem;line-height:1.7} .rule.watch{border-left:3px solid var(--sg-wrong)} .rule b:first-child{font-weight:500} .rule th{font-family:var(--sg-mono);font-weight:400;font-size:var(--sg-label);letter-spacing:.1em;color:var(--sg-ink-soft);text-align:left;padding:4px 10px 4px 0} .rule td:first-child{color:var(--sg-ink-faded)} .note{color:var(--sg-ink-soft)} /* ---- word bank cards (fixed width: both sides share one grid cell, so tapping doesn't move the row) ---- */ .cards{gap:10px} .card{display:inline-grid;place-items:center;background:var(--sg-white);color:var(--sg-ink);border:1px solid var(--sg-line-strong);border-radius:10px; padding:12px 18px;min-height:var(--sg-tap);font-family:var(--sg-serif);box-shadow:var(--sg-shadow-rest);transition:background .2s,border-color .2s} .card:hover{border-color:var(--sg-ink-soft)} .card > span{grid-area:1/1} .card .sv,.card .en{display:inline!important;font-size:1.1rem} .card .sv{visibility:hidden} .card.flip .sv{visibility:visible} .card.flip .en{visibility:hidden} .card.flip{background:var(--sg-accent-tint);border-color:var(--sg-accent);color:var(--sg-ink);animation:none} .card .sv{font-weight:500} /* ---- buttons ---- */ .btn{font-family:var(--sg-mono);font-size:15px;font-weight:500;letter-spacing:.04em;border:0;border-radius:var(--sg-pill);min-height:48px;padding:0 24px; background:var(--sg-accent);color:var(--sg-white);display:inline-flex;align-items:center;justify-content:center;gap:8px} .btn:hover{background:var(--sg-accent-hover)} .btn.ghost{background:transparent;border:1.5px solid var(--sg-line-input);color:var(--sg-ink-2);font-weight:400} .btn.ghost:hover{background:transparent;border-color:var(--sg-ink-soft);color:var(--sg-ink)} :root[data-theme="dark"] .btn:not(.ghost){color:#10202E} .linkbtn{font-family:var(--sg-mono);font-size:13px;letter-spacing:.04em;color:var(--sg-accent)} .checkrow{gap:16px} /* show buttons: outlined with a colour dot; filled with that colour when on */ .show{gap:8px} #show button{background:transparent!important;border:1.5px solid var(--sg-line-input)!important;color:var(--sg-ink-2)!important; font-family:var(--sg-mono);font-size:13px;letter-spacing:.06em;border-radius:var(--sg-pill);min-height:40px;padding:0 16px;display:inline-flex;align-items:center;gap:8px} #show button::before{content:"";width:10px;height:10px;border-radius:50%;flex:none;background:var(--dot,var(--sg-line-strong))} #show button[data-show=verbs]{--dot:var(--pres)} #show button[data-show=time]{--dot:var(--time)} #show button[data-show=adj]{--dot:var(--adj)} #show button[data-show=mw]{--dot:var(--mwc)} #show button[data-show=pp]{--dot:var(--plc)} #show button[data-show=enett]{--dot:linear-gradient(90deg,var(--enc) 50%,var(--ettc) 50%)} #show button[data-show=fa],#show button[data-show=ng]{--dot:linear-gradient(90deg,var(--fab) 50%,var(--fap) 50%)} #show button[data-show=order]{--dot:var(--past)} #show button[data-show=all]{--dot:conic-gradient(var(--pres),var(--time),var(--adj),var(--pres))} #show button.on{color:#1C1B19!important;border-color:transparent!important;background:var(--dot)!important} #show button.on::before{background:#1C1B19;width:6px;height:6px} /* tabs above texts */ .tabs{gap:0 22px;border-bottom:1px solid var(--sg-line)} .tabs button{font-family:var(--sg-mono);font-size:13px;letter-spacing:.06em;background:transparent!important;border:0!important;border-radius:0!important; color:var(--sg-ink-soft)!important;min-height:var(--sg-tap);padding:0!important} .tabs button[aria-selected=true]{color:var(--sg-ink)!important;box-shadow:inset 0 -2px 0 var(--sg-ink)} .tabs.big button{font-size:14px} /* reading text */ .text{font-family:var(--sg-serif);font-size:1.2rem;line-height:1.95} :root[data-theme="dark"] .text{font-weight:400;color:var(--sg-ink);letter-spacing:0} .gloss{font-family:var(--sg-serif)} .key span{font-size:12px;letter-spacing:.04em} /* exercises */ .opt .s{font-size:1.1rem} .pills span{font-family:var(--sg-serif)} input.ans,.cl input,.rwi input,.rw input{font-family:var(--sg-serif);font-size:1.1rem;background:transparent;border:0;border-bottom:2px solid var(--sg-accent);border-radius:0;min-height:44px;color:var(--sg-ink)} .cl.no input,.rwi.no input{border-bottom-color:var(--sg-wrong)} .cl.ok input,.rwi.ok input{border-bottom-color:var(--sg-correct)} textarea{font-family:var(--sg-serif);font-size:1.1rem;line-height:1.6;background:var(--sg-white);border:1px solid var(--sg-line-strong);border-radius:10px;color:var(--sg-ink)} .helpers .chip{font-size:12px;letter-spacing:.04em;border-radius:var(--sg-pill)} .helpers .chip.got{background:var(--sg-correct-bg);color:var(--sg-correct);border-color:var(--sg-correct)} details.model summary{font-family:var(--sg-mono);font-size:13px;letter-spacing:.04em;color:var(--sg-accent)} .checks label{font-size:1.05rem} /* send box */ .send{background:var(--sg-card);border:1px solid var(--sg-line);border-radius:var(--sg-radius);box-shadow:var(--sg-shadow-rest)} .send p{font-size:1rem;color:var(--sg-ink-2)} .toast{font-family:var(--sg-mono);font-size:13px} /* word pop-up */ .wpop{font-family:var(--sg-serif);background:var(--sg-card);border:1px solid var(--sg-line-strong);border-radius:var(--sg-radius);box-shadow:var(--sg-shadow-active)} /* ---- library page ---- */ .sg-lib .sg-modules > li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px} .sg-done-btn{font-family:var(--sg-mono);font-size:11px;letter-spacing:.1em;color:var(--sg-ink-soft);background:transparent;border:1.5px solid var(--sg-line-input); border-radius:var(--sg-pill);min-height:36px;padding:0 12px;cursor:pointer;white-space:nowrap} .sg-done-btn:hover{color:var(--sg-ink);border-color:var(--sg-ink-soft)} .sg-done-btn[aria-pressed="true"]{color:var(--sg-correct);border-color:var(--sg-correct)} .sg-lib-foot{display:flex;flex-direction:column;gap:6px;align-items:flex-start;border-top:1px solid var(--sg-line);padding-top:22px;font-size:18px;color:var(--sg-ink-2)} .sg-lib-foot a{font-family:var(--sg-mono);font-size:13px;letter-spacing:.04em} .sg-others{display:flex;flex-direction:column;gap:10px} [hidden]{display:none!important} #show button[data-show=all]:not(.on),#show button[data-show=enett]:not(.on),#show button[data-show=adj]:not(.on){color:var(--sg-ink-2)!important;background:transparent!important} .prompt{background:var(--sg-accent-tint);border-radius:10px;color:var(--sg-ink)} /* one blue button: in the send box, Send to T-O is the main action */ .send #copy{background:transparent;border:1.5px solid var(--sg-line-input);color:var(--sg-ink-2);font-weight:400} .send #copy:hover{border-color:var(--sg-ink-soft);color:var(--sg-ink)} /* ===================== step-by-step modules ===================== */ .sg-lesson-head{display:flex;flex-direction:column;gap:14px;margin-bottom:34px} .sg-lesson-head .sg-progress{margin-top:10px} .sg-lesson-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 18px} .sg-lesson-meta .sg-text-button{font-size:12px;letter-spacing:.1em;text-decoration:none} #flow{display:flex;flex-direction:column;gap:30px} .sg-step{display:flex;flex-direction:column;gap:12px} .sg-step .sg-step-text p{margin:0 0 .7em} .sg-step .sg-step-text p:last-child{margin-bottom:0} .sg-step.is-past .sg-step-text,.sg-step.is-past .sg-small,.sg-step.is-past .sg-en{color:var(--sg-ink-faded)} .sg-step.is-past .sg-card{box-shadow:none} .sg-step .sg-next{align-self:flex-start;margin-top:4px} .sg-card .sg-next{margin-top:14px} .sg-prompt{font-size:var(--sg-word);line-height:1.3;color:var(--sg-ink)} .sg-en{color:var(--sg-ink-soft);font-size:.95em} .sg-small{margin:4px 0 8px;color:var(--sg-ink-2);font-size:.9em;line-height:1.5} .sg-after{margin-top:2px} .sg-slot{display:flex;flex-direction:column;align-items:flex-start;gap:6px;align-self:stretch} .sg-slot .sg-answer-row,.sg-slot .sg-keys{align-self:stretch} .sg-afterrow:empty{display:none} .sg-afterrow{display:flex;gap:10px} .sg-options{display:flex;flex-direction:column;gap:10px;align-self:stretch;margin-top:8px} .sg-option{text-align:left;font-family:var(--sg-serif);font-size:1.1rem;font-style:italic;color:var(--sg-ink);background:var(--sg-white); border:1.5px solid var(--sg-line-input);border-radius:10px;min-height:52px;padding:10px 16px;cursor:pointer} .sg-option:hover{border-color:var(--sg-ink-soft)} .sg-option.is-wrong{border-color:var(--sg-wrong);color:var(--sg-wrong-text);text-decoration:line-through;text-decoration-thickness:1px} .sg-result [lang="sv"]{font-style:italic} .sg-card .cards{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;align-self:stretch} .sg-read{gap:8px} .sg-read__title{margin:0;font-weight:400;font-size:28px;line-height:1.2} .sg-read .text{align-self:stretch} .sg-gloss{margin:0;min-height:1.4em;font-size:1rem;color:var(--sg-ink-2)} .sg-showbar{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px} .sg-showbar button{background:transparent;border:1.5px solid var(--sg-line-input);color:var(--sg-ink-2);font-family:var(--sg-mono);font-size:13px;letter-spacing:.06em; border-radius:var(--sg-pill);min-height:40px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;cursor:pointer} .sg-showbar button::before{content:"";width:10px;height:10px;border-radius:50%;flex:none;background:var(--dot,var(--sg-line-strong))} .sg-showbar [data-show=verbs]{--dot:var(--pres)}.sg-showbar [data-show=time]{--dot:var(--time)}.sg-showbar [data-show=adj]{--dot:var(--adj)} .sg-showbar [data-show=mw]{--dot:var(--mwc)}.sg-showbar [data-show=enett]{--dot:linear-gradient(90deg,var(--enc) 50%,var(--ettc) 50%)} .sg-showbar button[aria-pressed=true]{background:var(--dot);border-color:transparent;color:#1C1B19} .sg-read .key{display:flex;flex-wrap:wrap;gap:6px} .sg-read .key[hidden]{display:none} .sg-write{width:100%;box-sizing:border-box;padding:12px 14px;margin-top:8px;align-self:stretch} .sg-card .helpers{display:flex;flex-wrap:wrap;gap:6px;align-self:stretch} .sg-finish .sg-label{margin-top:10px} .sg-finish .sg-answer.sg-name{font-size:1.2rem;font-weight:400;min-height:48px} .sg-btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px} .sg-btnrow .sg-button{margin-top:0;min-height:44px;font-size:13px} .sg-foot{margin-top:60px;font-family:var(--sg-mono);font-size:12px;letter-spacing:.06em;color:var(--sg-ink-soft);text-align:center} .sg-foot a{color:var(--sg-accent)} .sg-actionbar{z-index:30} @media (max-width:640px){.sg-step .sg-next,.sg-card .sg-next{display:none}} @media print{.sg-actionbar,.sg-lesson-meta .sg-text-button,.sg-btnrow,.sg-header{display:none!important}} /* no italics for Swedish in step cards (italics are kept for ett-words in texts) */ .sg-card__base{font-style:normal;color:var(--sg-ink)} .sg-result [lang="sv"],.sg-option{font-style:normal} .sg-reveal{margin:0;padding:0 0 0 1.6em;display:flex;flex-direction:column;gap:14px} .sg-reveal__item{padding-left:4px} .sg-reveal__item::marker{font-family:var(--sg-mono);font-size:13px;color:var(--sg-ink-faded)} .sg-reveal__item .sg-en{display:block} .sg-step.is-past .sg-reveal{color:var(--sg-ink-faded)} /* polite words / greetings (hej, tack, förlåt, ursäkta) */ :root,:root[data-theme="light"]{--ij:#F2E2A0} :root[data-theme="dark"]{--ij:#E8D27E} .ij{background:var(--ij);color:#1C1B19} .text.show-ij .w.ij{background:var(--ij)!important;color:#1C1B19!important;border-radius:4px} .sg-showbar [data-show=ij]{--dot:var(--ij)} .sg-line{display:block;margin-top:10px} .sg-reveal__item b[lang="sv"]{display:block} .sg-reveal__item .sg-en{margin-bottom:8px} .sg-reveal{list-style:none;padding-left:0} /* ---- flip tiles: fixed size so tapping never moves the row ---- */ .sg-tile{text-align:left} .sg-tile__stack{display:grid} .sg-tile__stack > .sg-tile__text{grid-area:1/1} .sg-tile .sg-tile__text.sv{visibility:hidden} .sg-tile.is-flipped .sg-tile__text.sv{visibility:visible} .sg-tile.is-flipped .sg-tile__text.en{visibility:hidden} .sg-tile .sg-tile__mark{visibility:hidden} .sg-tile.is-flipped .sg-tile__mark{visibility:visible} .sg-card .sg-tiles{margin-top:6px;align-self:stretch} /* phrase lists stay dark in done steps: they are the reference */ .sg-step.is-past .sg-phrase__sv{color:var(--sg-ink)} .sg-step .sg-note p{margin:0} .sg-phrases + .sg-next,.sg-note + .sg-next{margin-top:14px} /* reveal: Swedish lines in the man explainer use the phrase look */ .sg-reveal__item .sg-phrase__sv{margin-top:2px} /* ---- old-engine word bank cards get the same tile look ---- */ .card{display:inline-grid;grid-template-rows:auto auto;justify-items:start;place-items:initial;align-items:start;background:var(--sg-card);border:1px solid var(--sg-line-strong); border-radius:8px;padding:12px 18px;min-height:44px;font-size:19px;box-shadow:none;text-align:left} .card > span{grid-area:1/1} .card .sv,.card .en{font-size:19px;font-weight:400} .card::after{content:"TO LEARN";grid-area:2/1;font-family:var(--sg-mono);font-size:11px;letter-spacing:.1em;color:var(--sg-accent);visibility:hidden} .card.flip{background:var(--sg-card);border-color:var(--sg-line-strong);box-shadow:none} .card.flip::after{visibility:visible} .card.flip .sv{font-style:italic} .card:focus{outline:none} .card:focus-visible{outline:3px solid var(--sg-accent);outline-offset:2px} /* word-for-word (gloss under each word) on phrase lists */ .sg-phrases-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .sg-wfw{background:transparent;border:1px solid var(--sg-line-strong);color:var(--sg-ink-soft);font-family:var(--sg-mono);font-size:12px;letter-spacing:.08em;border-radius:6px;padding:8px 12px;min-height:44px;cursor:pointer;text-decoration:none} .sg-wfw[aria-pressed=true]{color:var(--sg-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px} .sg-gloss-line{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:.32em;row-gap:6px;margin:0} .sg-gloss-word{display:inline-grid;grid-template-columns:max-content} .sg-gloss-word__sv{font-family:var(--sg-serif);font-size:24px;font-weight:500;line-height:1.3;color:var(--sg-ink)} .sg-gloss-word__en{width:0;overflow:visible;white-space:nowrap;font-family:var(--sg-mono);font-size:11px;letter-spacing:.04em;color:var(--sg-ink-soft);display:none} .is-wfw .sg-gloss-word__en{display:block} @media (max-width:640px){.sg-gloss-word__sv{font-size:21px}} /* hairline between parts of a module */ .sg-step.has-rule{border-top:1px solid var(--sg-line-strong);padding-top:32px;margin-top:16px} /* sentence builder step */ .sg-build__row{display:flex;flex-direction:column;gap:8px;margin-top:16px} .sg-build__pills{display:flex;flex-wrap:wrap;gap:8px} .sg-pill{background:var(--sg-card);border:1px solid var(--sg-line-strong);border-radius:8px;padding:8px 14px;min-height:44px;font-family:var(--sg-serif);font-size:18px;color:var(--sg-ink);cursor:pointer} .sg-pill[aria-pressed=true]{border:2px solid var(--sg-ink);padding:7px 13px;font-weight:500} .sg-build__out,.sg-build__kept,.sg-build__row{align-self:stretch;width:100%} .sg-build__out{margin-top:22px;padding-top:18px;border-top:1px solid var(--sg-line)} .sg-build__sv{font-family:var(--sg-serif);font-size:26px;font-weight:500;line-height:1.3;margin:0;color:var(--sg-ink)} .sg-build__en{margin:4px 0 0} .sg-build__verb{background:var(--pres);color:var(--sg-ink);border-radius:4px;padding:0 .15em} .sg-build .sg-btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} .sg-build__kept{margin-top:16px} .sg-build__kept ul{list-style:none;padding:0;margin:8px 0 0} .sg-build__kept li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--sg-line);font-family:var(--sg-serif);font-size:18px} @media (max-width:640px){.sg-build__sv{font-size:22px}} /* word help on exercise cards */ .sg-help{display:flex;flex-direction:column;gap:6px;margin-top:10px} .sg-help__chips{display:flex;flex-wrap:wrap;gap:6px 16px} .sg-help__item{display:inline-flex;align-items:baseline;gap:6px} .sg-help__en{color:var(--sg-ink-soft);font-size:16px} /* answers and results the same size as the prompt (no size jump inside a card) */ .sg-result,.sg-answer{font-size:var(--sg-word);font-weight:400} .sg-moved{background:var(--pres);color:var(--sg-ink);border-radius:4px;padding:0 .15em} .sg-tile:focus:not(:focus-visible){outline:none} .sg-ul{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px} /* word help: shown by default, soft highlight, can be hidden */ .sg-help{background:color-mix(in srgb,var(--sg-accent-tint) 55%,var(--sg-card));border-radius:8px;padding:10px 14px 12px;align-self:stretch} .sg-help__head{display:flex;justify-content:space-between;align-items:center;gap:12px} .sg-help__toggle{min-height:36px;padding:6px 10px;font-size:11px} .sg-help.is-hidden{background:transparent;padding-left:0;padding-right:0} .sg-help.is-hidden .sg-help__chips{display:none} .sg-help .sg-chip{background:var(--sg-card)} .sg-help__toggle[aria-pressed=true]{text-decoration:none;color:var(--sg-ink-soft)} /* ---- flip tiles (new and old modules). italic = ett-word, bold = multi-word unit: never used just to mark Swedish ---- */ .sg-tile,.card{border:1px solid var(--sg-line-strong);border-radius:8px;padding:12px 18px;min-height:44px;background:var(--sg-card);box-shadow:none} .sg-tile.is-flipped,.card.flip{background:var(--sg-accent-tint);border-color:var(--sg-line-strong);box-shadow:none;outline:none} .sg-tile__text.en,.card .en{font-family:var(--sg-mono);font-size:15px;letter-spacing:.02em;color:var(--sg-ink-2);font-weight:400;font-style:normal;text-transform:none} .sg-tile__text.sv,.card .sv{font-family:var(--sg-serif);font-size:20px;font-weight:500;color:var(--sg-ink);font-style:normal} .sg-tile.is-flipped .sg-tile__text,.card.flip .sv{font-style:normal} .sg-tile__text.sv i,.card.ettw .sv,.card .sv i{font-style:italic} .sg-tile__mark,.card::after{font-family:var(--sg-mono);font-size:11px;letter-spacing:.1em;color:var(--sg-accent);font-style:normal;font-weight:400} /* no "TO LEARN" label: the light blue alone shows a saved word */ .sg-tile .sg-tile__mark,.card::after{display:none} .card{grid-template-rows:auto;align-items:center} .sg-tile__stack,.card > span{align-items:center} /* hidden word help collapses to just the SHOW WORDS button */ .sg-help.is-hidden .sg-label{display:none} .sg-help.is-hidden .sg-help__head{justify-content:flex-start} .sg-help.is-hidden{padding:0;margin-top:8px} .sg-gloss__sv{font-weight:500} /* saved words in reading texts: the same light blue as flipped tiles */ .sg-read .text:not([class*="show-"]) .w.is-saved{background:var(--sg-saved)!important;border-color:transparent!important;border-radius:3px;box-shadow:none} /* saved words: light yellow (blue is for flipped tiles) */ :root,:root[data-theme="light"]{--sg-saved:#F6E7A6} :root[data-theme="dark"]{--sg-saved:#4F4524} .sg-read__note{margin:10px 0 0;color:var(--sg-ink-soft);font-size:16px} /* saved words toggle + skulle vilja/kunna colour */ .sg-read .text.hide-saved .w.is-saved{background:none!important} .sg-showbar .sg-savedbtn{--dot:var(--sg-saved)} .sg-showbar .sg-savedbtn[aria-pressed=true]{background:transparent;border-color:var(--sg-line-input);color:var(--sg-ink-2)} .text.show-verbs .w.sk,.key .sk{background:var(--past)!important;color:#1C1B19!important} /* almost right: the letter that was wrong */ .sg-fix{color:var(--sg-accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px} .sg-almost{color:var(--sg-accent)} /* show / hide English */ .sg-enswitch{display:inline-flex;align-items:center;gap:14px} @media (max-width:640px){.sg-enswitch{order:3;width:100%}} .sg-enswitch__label{font-family:var(--sg-mono);font-size:12px;letter-spacing:.14em;color:var(--sg-ink-soft)} .sg-enswitch button{min-height:var(--sg-tap);padding:0;border:0;background:transparent;font-family:var(--sg-mono);font-size:12px;letter-spacing:.1em;color:var(--sg-ink-soft);cursor:pointer} .sg-enswitch button[aria-pressed="true"]{color:var(--sg-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px} .sg-tr{background:none!important} .sg-enbtn{display:none;align-items:center;min-height:44px;padding:0;border:0;background:none;font-family:var(--sg-mono);font-size:11px;letter-spacing:.1em;color:var(--sg-accent);cursor:pointer} .sg-enbtn:hover{text-decoration:underline;text-underline-offset:3px} .sg-en-off .sg-tr:not(.is-open){display:none!important} .sg-en-off .sg-enbtn[aria-expanded="false"]{display:inline-flex} @media print{.sg-enswitch,.sg-enbtn{display:none!important}.sg-en-off .sg-tr{display:block!important}} /* tap to save */ .sg-savetag{font-family:var(--sg-mono);font-size:11px;letter-spacing:.1em;color:var(--sg-ink-soft);margin-left:6px;white-space:nowrap} .sg-savetag.is-on{color:var(--sg-correct)} .sg-wordlist{align-self:stretch} .sg-wordlist:empty{display:none} .sg-wordlist ul{list-style:none;margin:6px 0 4px;padding:0} .sg-wordlist li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 0;border-bottom:1px solid var(--sg-line)} .sg-wordlist__sv{font-size:20px;font-weight:500} .sg-wordlist__en{flex:1;font-family:var(--sg-mono);font-size:14px;color:var(--sg-ink-2)} .sg-wordlist .sg-text-button{font-size:12px;letter-spacing:.1em;text-decoration:none} .sg-showbar [data-show=ng]{--dot:linear-gradient(90deg,var(--enc) 33%,var(--ettc) 33% 66%,var(--plc) 66%)} .sg-showbar [data-show=fa]{--dot:linear-gradient(90deg,var(--fab) 50%,var(--fap) 50%)} .sg-msg{display:inline-block;max-width:34em;margin:4px 0;padding:12px 16px;border-radius:18px 18px 18px 4px;background:var(--sg-accent-tint);color:var(--sg-ink);font-size:20px;line-height:1.45} .sg-showbar [data-show=pp]{--dot:linear-gradient(90deg,var(--plc) 50%,var(--enc) 50%)} .sg-optkey{display:inline-block;min-width:1.2em;margin-right:12px;font-family:var(--sg-mono);font-size:12px;color:var(--sg-ink-faded)} @media (max-width:640px),(hover:none){.sg-optkey{display:none}} .text.show-wh .w.still{background:var(--still)!important;color:var(--sg-ink)!important} :root[data-theme="dark"] .text.show-wh .w.still{color:#fff!important} .text.show-wh .w.move{box-shadow:inset 0 -3px 0 var(--move)!important;background:color-mix(in srgb,var(--still) 35%,transparent)!important} .sg-showbar [data-show=wh]{--dot:linear-gradient(90deg,var(--still) 50%,var(--move) 50%)} .sg-showbar [data-show=wh][aria-pressed=true]{background:var(--still)} .text.show-order .w.p1{background:color-mix(in srgb,#6a8fc7 22%,transparent)!important;box-shadow:inset 0 -2px 0 #6a8fc7;border-radius:3px} .text.show-order .w.v2{background:var(--pres)!important;border-radius:4px;font-weight:500} .text.show-order .w.sa{color:var(--sg-ink-soft)!important;font-style:italic} .key .p1{background:color-mix(in srgb,#6a8fc7 22%,transparent);box-shadow:inset 0 -2px 0 #6a8fc7}.key .v2{background:var(--pres)} .sg-showbar [data-show=order]{--dot:linear-gradient(90deg,color-mix(in srgb,#6a8fc7 40%,white) 50%,var(--pres) 50%)} .sg-read .text.show-order{display:block;line-height:inherit;gap:0} .hotels--two table{min-width:0}.sg-step-text .hotels{margin:10px 0} .sg-tr--always:not(.is-open){display:none!important} .sg-enbtn[data-always][aria-expanded="false"]{display:inline-flex} .sg-exlist{list-style:none;margin:4px 0 14px;padding:0} .sg-exlist li{margin:2px 0} .sg-exlist .sg-en{display:block;margin:0} .sg-exlist .sg-enbtn{min-height:32px} .sg-optnote{margin:6px 0 0;font-size:17px;color:var(--sg-ink-2);border-left:3px solid var(--sg-accent-tint);padding-left:10px} .sg-exlist .sg-enbtn{margin-left:12px;vertical-align:middle} .sg-en b,.sg-phrase__en b{font-weight:700;color:var(--sg-ink)} .text .w.spk{font-family:"DM Mono",monospace;font-size:.72em;letter-spacing:.1em;text-transform:uppercase;color:var(--sg-ink-soft);font-weight:400!important} .sg-adj{background:var(--adj);color:var(--adj-ink);border-radius:4px;padding:0 .15em} .sg-gap--short{min-width:70px}@media (max-width:640px){.sg-gap--short{min-width:56px}} .sg-forms{border-collapse:collapse;width:100%;margin:6px 0 4px;font-size:1.05em} .sg-forms th,.sg-forms td{border-bottom:1px solid var(--sg-line,rgba(127,127,127,.25));padding:8px 6px;text-align:left;vertical-align:bottom} .sg-forms th{font-family:"DM Mono",monospace;font-size:.62em;letter-spacing:.12em;text-transform:uppercase;color:var(--sg-ink-soft);font-weight:400} .sg-forms td.en{font-size:.82em;color:var(--sg-ink-soft)} .sg-forms tr.has-en td{border-bottom:0;padding-bottom:0}.sg-forms tr.has-en+tr td.en{padding-top:2px;vertical-align:top;white-space:nowrap} /* translation right under its word */ @media (max-width:640px){.sg-forms tr.has-en td,.sg-forms tr.has-en+tr td.en{padding-right:12px}} @media (max-width:640px){.sg-forms{font-size:.95em}.sg-forms th,.sg-forms td{padding:6px 3px}} /* NEW tag on library modules (shown 30 days, until the learner opens the module) */ .sg-status[data-status="fresh"]{color:var(--sg-accent);font-weight:700} .sg-status[data-status="fresh"]::before{background:currentColor;border-color:currentColor} .sg-tabs button.has-new{position:relative} .sg-tabs button.has-new::after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--sg-accent)} /* topic colours in the library: the kind of word a module is about */ :root{--t-nouns:#E0662A;--t-verbs:#4A9A3F;--t-adjectives:#D45C8C;--t-pronouns:#D9B11A;--t-order:#8B6FD1;--t-phrases:#9C9487} :root[data-theme="dark"]{--t-nouns:#F28A55;--t-verbs:#8CC79A;--t-adjectives:#F08DB5;--t-pronouns:#EDD46A;--t-order:#B49CF0;--t-phrases:#9C9487} .sg-module__tags{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap} .sg-topic{display:inline-flex;align-items:center;gap:7px;color:var(--sg-ink-2,var(--sg-ink))} .sg-topic::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid var(--tc);flex:none;box-sizing:border-box} .sg-topic[data-topic="nouns"]{--tc:var(--t-nouns)}.sg-topic[data-topic="verbs"]{--tc:var(--t-verbs)}.sg-topic[data-topic="adjectives"]{--tc:var(--t-adjectives)} .sg-topic[data-topic="pronouns"]{--tc:var(--t-pronouns)}.sg-topic[data-topic="order"]{--tc:var(--t-order)}.sg-topic[data-topic="phrases"]{--tc:var(--t-phrases)} .sg-topic[data-topic="reading"]::before{display:none} .sg-mins{color:var(--sg-ink-soft)} #cat-tabs button[aria-pressed="true"] .sg-topic::before{background:var(--tc)} #cat-tabs .sg-topic{color:inherit} /* little words after the verb (inte, alltid, aldrig, också, ofta): light purple, same family as the Word order topic colour */ :root{--adv:#DCD0F5;--adv-ink:inherit} :root[data-theme="dark"]{--adv:#D9CCF5;--adv-ink:#221A33} .sg-adv{background:var(--adv);color:var(--adv-ink);border-radius:4px;padding:0 .15em} /* "Show the text" inside question cards */ .sg-ref{margin:4px 0 10px} .sg-ref__toggle{font-family:var(--sg-mono);font-size:11px;letter-spacing:.12em;color:var(--sg-accent);background:none;border:0;padding:4px 0;cursor:pointer;min-height:32px} .sg-ref__text{margin-top:6px;padding:12px 14px;border-left:3px solid var(--sg-accent-tint,#DCE7F2);background:var(--sg-paper);border-radius:6px;font-size:.95em;line-height:1.55} .sg-ref__text p{margin:0 0 6px}.sg-ref__text p:last-child{margin:0} /* progress that stays visible at the bottom of a module */ .sg-dock.sg-only-desktop{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--sg-paper);border-top:1px solid var(--sg-line)} .sg-dock__in{max-width:720px;margin:0 auto;padding:10px 24px 12px} .sg-dock__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .sg-dock__txt{font-family:var(--sg-mono);font-size:11px;letter-spacing:.12em;color:var(--sg-ink-soft)} .sg-dock__line{border-radius:2px;overflow:hidden}.sg-dock__bar{transition:width .3s ease} .sg-dock--phone{margin:0 0 10px} .sg-actionbar .sg-dock--phone .sg-dock__row{margin-bottom:5px} @media print{.sg-dock{display:none!important}} /* example phrases can be saved to "words to learn" by tapping them */ .sg-phrase--save{cursor:pointer;border-radius:3px;transition:background .15s} .sg-phrase--save:hover{background:color-mix(in srgb,var(--sg-saved) 45%,transparent)} .sg-phrase--save.is-saved{background:var(--sg-saved)} .sg-phrases-head{display:flex;align-items:center;gap:12px} .sg-phrases-tap{font-family:var(--sg-mono);font-size:10px;letter-spacing:.12em;color:var(--sg-ink-faded,var(--sg-ink-soft));margin-left:auto} .sg-phrases-head .sg-wfw{margin-left:12px} /* å ä ö under the writing box */ .sg-keys--write{margin-top:8px} /* next module on the DONE card */ .sg-nextmod{width:100%;box-sizing:border-box;margin-top:22px;padding-top:18px;border-top:1px solid var(--sg-line);display:flex;flex-direction:column;align-items:flex-start;gap:10px} .sg-nextmod__title{font-size:1.25em;color:var(--sg-ink);text-decoration:none} .sg-nextmod__title:hover{text-decoration:underline} .sg-nextmod__lib{font-family:var(--sg-mono);font-size:12px;letter-spacing:.1em} @media print{.sg-nextmod{display:none}} .sg-privacy p{margin:0;max-width:36em}.sg-privacy h2.sg-label{margin:14px 0 -14px} /* repetition modules: score per area on the DONE card */ .sg-areas{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px} .sg-areas ul{list-style:none;margin:0;padding:0} .sg-area{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--sg-line)} .sg-area__name{font-family:var(--sg-serif);font-size:19px;color:var(--sg-ink)} .sg-area__score{font-family:var(--sg-mono);font-size:13px;letter-spacing:.04em;color:var(--sg-wrong-text)} .sg-area.is-good .sg-area__score{color:var(--sg-correct)} .sg-area__repeat{grid-column:1/-1;font-family:var(--sg-mono);font-size:13px;letter-spacing:.02em;color:var(--sg-ink-soft)} .sg-area__repeat a{color:var(--sg-accent);text-underline-offset:3px} .sg-areas{align-self:stretch;width:100%}.sg-areas ul{width:100%} /* tappable words in question cards (translation + save) */ .sg-tapw{cursor:pointer;border-radius:3px;transition:background .15s} .sg-tapw:hover,.sg-tapw:focus-visible{background:var(--sg-accent-tint);outline:none} .sg-tapw.is-saved{background:var(--sg-saved);border-radius:3px} .sg-card .sg-gloss{margin:6px 0 0;font-family:var(--sg-mono);font-size:13px;color:var(--sg-ink-2)} .sg-card .sg-gloss__sv{font-family:var(--sg-serif);font-size:17px} /* word banks with pairs (gå | gick): two neat columns, one word per card */ .sg-tiles--pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:520px} .sg-tiles--pairs .sg-tile{width:100%;box-sizing:border-box} .sg-tiles__head{font-family:var(--sg-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sg-ink-soft);padding:0 2px} /* ---- grammar glossary ---- */ .gl-page .sg-switch{margin-top:28px} .gl-toc{display:flex;flex-wrap:wrap;gap:6px 18px;margin:22px 0 8px;font-family:var(--sg-mono);font-size:13px;letter-spacing:.02em} .gl-toc a{display:inline-flex;align-items:center;gap:8px;min-height:36px;color:var(--sg-accent);text-decoration:none} .gl-toc a:hover{text-decoration:underline;text-underline-offset:3px} .gl-toc .sg-topic{gap:0} .gl-level{display:flex;flex-direction:column} .gl-entry{padding:36px 0;border-top:1px solid var(--sg-line-strong);display:flex;flex-direction:column;gap:14px;scroll-margin-top:16px} .gl-entry .sg-topic{font-family:var(--sg-mono);font-size:11px;letter-spacing:.12em} .gl-name{margin:0;font-family:var(--sg-serif);font-weight:400;font-size:34px;line-height:1.15;color:var(--sg-ink)} .gl-term{margin:-8px 0 0;font-family:var(--sg-mono);font-size:13px;letter-spacing:.02em;color:var(--sg-ink-faded)} .gl-rule{margin:0;font-size:21px;line-height:1.55;color:var(--sg-ink)} .gl-extra,.gl-not{margin:0;font-size:18px;line-height:1.55;color:var(--sg-ink-2)} .gl-not__label{font-family:var(--sg-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sg-ink-soft);margin-right:4px} .gl-table{margin:4px 0} .gl-ex{list-style:none;margin:0;padding:0;border-top:1px solid var(--sg-line)} .gl-ex li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--sg-line)} .gl-ex__sv{font-size:21px;color:var(--sg-ink)} .gl-ex__en{font-family:var(--sg-mono);font-size:13px;color:var(--sg-ink-soft)} .gl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:4px} .gl-link{display:inline-flex;align-items:center;min-height:44px;font-family:var(--sg-mono);font-size:13px;letter-spacing:.03em;color:var(--sg-accent);text-underline-offset:4px} .gl-actions .sg-button{min-height:44px;font-size:13px} .gl-qc{background:var(--sg-card);border:1px solid var(--sg-line);border-radius:var(--sg-radius);padding:20px 22px;display:flex;flex-direction:column;gap:12px} .gl-qc__p{margin:0;font-size:24px;line-height:1.4;color:var(--sg-ink)} .gl-qc__en{margin:0;font-family:var(--sg-mono);font-size:14px;color:var(--sg-ink-2)} .gl-qc__a{display:flex;flex-direction:column;gap:8px} .gl-qc__fb{margin:0;font-family:var(--sg-mono);font-size:14px;min-height:20px} .gl-qc__fb.is-right{color:var(--sg-correct)}.gl-qc__fb.is-wrong{color:var(--sg-wrong-text)} .gl-qc .sg-button{align-self:flex-start} .gl-qc__done{margin:0;font-size:20px} .gl-rel{margin:0;font-family:var(--sg-mono);font-size:12px;letter-spacing:.04em;color:var(--sg-ink-soft)} .gl-rel a{color:var(--sg-accent);margin-left:6px;text-underline-offset:3px} .gl-soon{margin:0;padding-left:1.1em;font-size:19px;line-height:1.8;color:var(--sg-ink-2)} @media (max-width:640px){.gl-name{font-size:28px}.gl-rule{font-size:19px}} .gl-table{max-width:560px} .gl-rel a{margin-left:0} /* tap translation label (like the front page) */ .sg-tip{position:absolute;z-index:60;left:0;top:0;max-width:min(320px,calc(100vw - 16px));padding:6px 14px;border-radius:10px;background:var(--sg-ink);color:var(--sg-paper);font-family:var(--sg-mono);font-size:15px;letter-spacing:.06em;line-height:1.35;text-align:center;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;box-shadow:0 4px 14px rgba(0,0,0,.18)} .sg-tip.is-on{opacity:1;transform:none} .sg-tip__en{display:block} .sg-tip__sub{display:block;margin-top:2px;font-size:11px;letter-spacing:.04em;opacity:.75;white-space:normal} .sg-tip__sub [lang="sv"]{font-family:var(--sg-serif);font-size:13px;letter-spacing:0} .sg-tapw.is-tipped{text-decoration:underline dotted var(--sg-accent);text-decoration-thickness:2px;text-underline-offset:5px} /* story lines: English hidden until asked for */ .sg-story-btn{display:block;margin-top:6px;font-family:var(--sg-mono);font-size:12px;letter-spacing:.08em;color:var(--sg-accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .sg-story-en{display:block} .sg-story-en[hidden]{display:none} /* ===== design round 30 Oct (homework site): header tools, theme icon, lesson step bar, right vs verb ===== */ body:not(.sg-site) .sg-header__inner{max-width:1100px} .sg-tools{display:flex;align-items:center;gap:10px} .sg-tools a{display:inline-flex;align-items:center;min-height:var(--sg-tap);font-family:var(--sg-mono);font-size:13px;letter-spacing:.08em;color:var(--sg-ink-soft);text-decoration:none} .sg-tools a.sg-nav__login{gap:7px;padding:7px 14px;min-height:40px;border:1.5px solid var(--sg-accent);border-radius:999px;color:var(--sg-accent);letter-spacing:.02em;font-weight:500;line-height:1} .sg-tools a.sg-nav__login:hover{background:var(--sg-accent);color:var(--sg-paper)} .sg-tools a.sg-nav__login svg{width:15px;height:15px} .sg-tools a[aria-current="page"]{color:var(--sg-ink)} .theme-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sg-ink-soft);cursor:pointer} .theme-icon:hover{color:var(--sg-ink);background:var(--sg-line)} .theme-icon:focus-visible,.sg-tools a:focus-visible{outline:2px solid var(--sg-accent);outline-offset:2px} body:not(.sg-site) .sg-nav{margin-left:auto} @media (max-width:640px){ body:not(.sg-site) .sg-header__inner{flex-wrap:wrap;gap:0 8px;padding-bottom:0} body:not(.sg-site) .sg-brand{order:1;margin-right:auto} body:not(.sg-site) .sg-tools{order:2} body:not(.sg-site) .sg-nav{order:3;flex-basis:100%;margin-left:0;gap:24px} body:not(.sg-site) .sg-nav a[href="https://swedishgym.se"]{display:none} .sg-tools a.sg-nav__login{padding:6px 11px} } /* lesson: sticky row + thick progress bar */ :root,:root[data-theme="light"]{--sg-track:#DCE7F2;--sg-right-text:#2E6B3A} :root[data-theme="dark"]{--sg-track:#25313C;--sg-right-text:#8CC48A} .sg-stepbar{position:sticky;top:0;z-index:20;background:var(--sg-paper);margin:18px 0 0;padding:10px 0 12px;border-bottom:1px solid var(--sg-line)} .sg-stepbar__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;margin-bottom:10px;font-family:var(--sg-mono);font-size:12px;letter-spacing:.1em} .sg-stepbar__count{font-family:var(--sg-mono);font-size:12px;letter-spacing:.1em;color:var(--sg-ink)} .sg-stepbar__count b{font-weight:500;color:var(--sg-ink)} .sg-stepbar__of{color:var(--sg-ink-soft)} .sg-stepbar__links,.sg-steplinks{display:inline-flex;align-items:center;gap:10px;color:var(--sg-ink-soft)} .sg-stepbar__links .sg-text-button,.sg-steplinks .sg-text-button{font-size:12px;letter-spacing:.1em;text-decoration:none;line-height:1;display:inline-flex;align-items:center;min-height:var(--sg-tap)} .sg-steplinks{display:flex;margin:22px 0 0;font-family:var(--sg-mono);font-size:12px;letter-spacing:.1em} /* same font as the top row, so the · between the links sits centred on phone */ .sg-steplinks:empty{display:none} .sg-stepbar .sg-progress{height:8px;border-radius:4px;background:var(--sg-track);overflow:hidden;margin:0} .sg-stepbar .sg-progress__bar{height:8px;border-radius:4px;background:var(--sg-accent);transition:width .3s ease} .sg-stepbar .sg-enswitch{margin:0} @media (prefers-reduced-motion:reduce){.sg-stepbar .sg-progress__bar{transition:none}} @media print{.sg-stepbar{position:static}.sg-steplinks{display:none}} /* green lettering = right; green highlight = verb (never green text) */ .sg-result>[lang]{color:var(--sg-right-text)} .sg-result>[lang] .sg-moved,.sg-result>[lang] .sg-ending,.sg-result>[lang] .sg-ul{background:transparent;color:inherit;padding:0;text-decoration:underline;text-decoration-color:var(--sg-right-text);text-decoration-thickness:2px;text-underline-offset:6px} @media (max-width:640px){.sg-stepbar .sg-enswitch{order:0;width:auto;gap:10px}.sg-stepbar__row{flex-wrap:nowrap}} /* audio: speaker switch in the sticky row, playing ▷, question ▷ */ .sg-stepbar__en{display:inline-flex;align-items:center;gap:14px} .sg-audioswitch{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sg-tap);min-height:var(--sg-tap);padding:0;border:0;background:transparent;color:var(--sg-ink-soft);cursor:pointer} .sg-audioswitch[aria-pressed="true"]{color:var(--sg-ink)} .sg-audioswitch:focus-visible{outline:2px solid var(--sg-accent);outline-offset:2px;border-radius:6px} .sg-audiohint{margin:8px 0 0;font-family:var(--sg-mono);font-size:12px;letter-spacing:.06em;color:var(--sg-ink-soft)} .sg-play{display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1} .sg-play.is-playing{border-color:var(--sg-accent)} .sg-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px} .sg-bars i{display:block;width:3px;height:100%;background:currentColor;border-radius:1px;animation:sg-bars .9s ease-in-out infinite} .sg-bars i:nth-child(2){animation-delay:-.3s}.sg-bars i:nth-child(3){animation-delay:-.6s} @keyframes sg-bars{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}} .sg-bars i{transform-origin:bottom} @media (prefers-reduced-motion:reduce){.sg-bars i{animation:none;transform:scaleY(.7)}} .sg-card.has-play{position:relative}.sg-card.has-play>.sg-play--q{position:absolute;top:14px;right:14px}.sg-card.has-play>.sg-prompt{display:block;padding-right:56px} @media (max-width:640px){.sg-stepbar__en{gap:8px}} @media print{.sg-audioswitch,.sg-play{display:none!important}} /* audio on example cards: ▷ for the prompt (top right) and next to the answer */ .sg-card.has-play>.sg-card__base{display:block;padding-right:56px} .sg-card.has-aplay .sg-slot{align-self:stretch} .sg-arow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:1 1 100%;width:100%} .sg-card .sg-arow>.sg-play{margin-right:-16px} /* same right edge as the ▷ at the top of the card (14px from the border) */ @media (max-width:640px){.sg-card .sg-arow>.sg-play{margin-right:-6px}} /* phrase rows with several forms: each form with its English right under it; whole pairs wrap on phone */ .sg-pairs{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:.45em;row-gap:8px} .sg-pair{display:flex;flex-direction:column} .sg-pair__arr{font-size:24px;line-height:1.3;color:var(--sg-ink)} @media (max-width:640px){.sg-pair__arr{font-size:21px}} /* a new step scrolls to just below the sticky bar */ .sg-step{scroll-margin-top:calc(var(--sg-barh,0px) + 14px)} /* the sticky bar's background as wide as the cards (they stick out 30px each side on desktop), so card edges don't show beside it */ .sg-stepbar{border-bottom:0;isolation:isolate} .sg-stepbar::before{content:"";position:absolute;inset:0 -32px;z-index:-1;background:var(--sg-paper);border-bottom:1px solid var(--sg-line)} @media (max-width:640px){.sg-stepbar::before{inset:0 -20px}} /* ---- accounts: log-in dialog and My Swedish ---- */ .sgx-dialog{width:min(460px,calc(100vw - 32px));box-sizing:border-box;padding:30px 30px 26px;border:1px solid var(--sg-line-strong);border-radius:var(--sg-radius);background:var(--sg-card);color:var(--sg-ink);box-shadow:var(--sg-shadow-active);font-family:var(--sg-serif)} .sgx-dialog::backdrop{background:rgba(28,27,25,.35)} .sgx-close{position:absolute;top:10px;right:12px;width:var(--sg-tap);height:var(--sg-tap);border:0;background:transparent;color:var(--sg-ink-soft);font-size:26px;line-height:1;cursor:pointer} .sgx-close:hover{color:var(--sg-ink)} .sgx-form{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin:0} .sgx-form p{margin:0;font-size:19px;line-height:1.5;color:var(--sg-ink-2)} .sgx-title{margin:0;font:500 28px/1.2 var(--sg-serif);color:var(--sg-ink);padding-right:28px} .sgx-field{display:flex;flex-direction:column;gap:4px;margin-top:4px} .sgx-input{min-height:52px;box-sizing:border-box;padding:0 4px;border:0;border-bottom:2px solid var(--sg-accent);border-radius:0;background:transparent;font:500 22px var(--sg-serif);color:var(--sg-ink);width:100%} .sgx-input:focus{outline:none;border-bottom-color:var(--sg-accent-hover);box-shadow:0 2px 0 var(--sg-accent-hover)} .sgx-input::placeholder{color:var(--sg-ink-faded);font-weight:400} .sgx-msg{min-height:0;font-size:17px!important}.sgx-msg:empty{display:none} .sgx-msg.is-wrong{color:var(--sg-wrong-text)!important} .sgx-small{font-size:16px!important;color:var(--sg-ink-soft)!important} .sgx-form .sg-button[disabled]{opacity:.6;cursor:default} .sgx-form .sg-button--ghost{align-self:flex-start} @media (max-width:640px){.sgx-dialog{padding:24px 20px 20px}.sgx-title{font-size:24px}} @media (max-width:520px){.sg-nav{gap:16px;font-size:12px}.sg-nav a[href="https://swedishgym.se"]{display:none}} .sg-me .sgx-box{background:var(--sg-card);border:1px solid var(--sg-line);border-radius:var(--sg-radius);padding:24px 30px;box-shadow:var(--sg-shadow-rest);display:flex;flex-direction:column;gap:12px} .sg-me .sgx-box p{margin:0;font-size:19px;color:var(--sg-ink-2)} .sg-me .sgx-box .sg-button{align-self:flex-start} .sgx-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap} .sgx-row .sgx-field{flex:1 1 220px;margin:0} .sgx-saved{font-family:var(--sg-mono);font-size:13px;color:var(--sg-correct);min-height:20px} .sgx-sec{display:flex;flex-direction:column;gap:10px} .sgx-sec>h2{margin:0;padding-bottom:10px;border-bottom:1px solid var(--sg-line-strong)} .sgx-list{list-style:none;margin:0;padding:0} .sgx-list>li{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--sg-line)} .sgx-list .sgx-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .sgx-list a.sgx-t{color:var(--sg-ink);text-decoration:none;font-size:var(--sg-row-title);line-height:1.25} .sgx-list a.sgx-t:hover{color:var(--sg-accent)} .sgx-meta{display:flex;align-items:center;gap:12px} .sgx-meta .sg-progress{flex:0 1 160px;margin:0} .sgx-go{flex:none;font-family:var(--sg-mono);font-size:14px;color:var(--sg-accent);text-decoration:none;white-space:nowrap} .sgx-go:hover{text-decoration:underline;text-underline-offset:3px} .sgx-donetick{flex:none;font-family:var(--sg-mono);font-size:13px;color:var(--sg-correct)} .sgx-group{margin-top:8px} .sgx-group>.sg-label{display:block;margin:10px 0 2px} .sgx-words{list-style:none;margin:0;padding:0} .sgx-words li{display:flex;gap:14px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--sg-line);flex-wrap:wrap} .sgx-words .sv{font-size:20px;font-weight:500;color:var(--sg-ink)} .sgx-words .en{font-family:var(--sg-mono);font-size:15px;color:var(--sg-ink-2)} .sgx-sents li .sv{font-weight:400} .sgx-empty{margin:4px 0 0;font-size:18px;color:var(--sg-ink-soft)} .sgx-btns{display:flex;gap:12px;flex-wrap:wrap} .sgx-note{font-family:var(--sg-mono);font-size:13px;color:var(--sg-correct);min-height:20px} @media (max-width:640px){.sg-me .sgx-box{padding:18px 20px}.sgx-list>li{flex-wrap:wrap;gap:8px}} @media print{.sgx-dialog,.sg-me .sgx-box,.sgx-btns,.sgx-go,.theme-toggle{display:none!important}.sg-me{padding:0}} .sg-me .sgx-box .sg-text-button{align-self:flex-start} .sg-me .sgx-row .sg-button{align-self:flex-end} .sgx-meta .sg-label{white-space:nowrap} .sgx-saved:empty{display:none} @media (max-width:640px){.sgx-list .sgx-main{flex-basis:100%}.sgx-meta .sg-progress{flex-basis:110px}} .sgx-danger{color:var(--sg-wrong,#B3392F)!important} /* clearer log in in the header */ .sg-nav a.sg-nav__login{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:1.5px solid var(--sg-accent);border-radius:999px;color:var(--sg-accent);text-transform:none;letter-spacing:.02em;font-weight:500;line-height:1} .sg-nav a.sg-nav__login:hover{background:var(--sg-accent);color:var(--sg-paper)} .sg-nav a.sg-nav__login svg{width:15px;height:15px} .sg-nav a.sg-nav__login[aria-current]{box-shadow:none} .sg-nav__dot{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--sg-correct);vertical-align:1px} /* save box on the DONE card */ .sgx-save{margin:22px 0 4px;padding:20px 20px 16px;border:1.5px solid var(--sg-accent);border-radius:14px;background:var(--sg-accent-tint)} .sgx-save .sgx-form{gap:10px} .sgx-save__title{margin:0;font-family:var(--sg-serif);font-size:24px;font-weight:500;line-height:1.25;color:var(--sg-ink)} .sgx-save .sgx-form p{font-size:17px} .sgx-save__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4px} .sgx-save__later{font-family:var(--sg-mono);font-size:13px;letter-spacing:.06em;color:var(--sg-ink-soft);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px} @media (max-width:640px){.sg-nav a.sg-nav__login{padding:6px 11px}.sgx-save__title{font-size:21px}.sgx-save__row .sg-button{flex:1}} /* ===================================================================== Main site (Oct 2026): front page, private lessons, about. Uses the swedishgym.css tokens, so light and dark both work. ===================================================================== */ :root,:root[data-theme="light"]{--site-panel:#C9DCEE;--site-panel-ink:#1C1B19;--site-panel-label:#24527A} :root[data-theme="dark"]{--site-panel:#25344A;--site-panel-ink:#ECE7DE;--site-panel-label:#C0D6EE} /* header: menu button on phones */ .sg-menu-btn{display:none;align-items:center;gap:10px;min-height:var(--sg-tap);padding:0;border:0;background:transparent;color:var(--sg-ink); font-family:var(--sg-mono);font-size:12px;letter-spacing:.1em;cursor:pointer} @media (max-width:640px){ .sg-site .sg-menu-btn{display:inline-flex} .sg-site .sg-header__inner{flex-wrap:wrap} .sg-site .sg-header .sg-nav{display:none;width:100%;flex-direction:column;gap:0;padding:4px 0 10px} .sg-site .sg-header.is-open .sg-nav{display:flex} .sg-site .sg-header .sg-nav a,.sg-site .sg-header .sg-nav .theme-toggle{min-height:48px;border-top:1px solid var(--sg-line);width:100%;justify-content:flex-start;font-size:13px} .sg-site .sg-header .sg-nav a[aria-current="page"]{box-shadow:none;color:var(--sg-accent)} } .site{max-width:1100px;margin:0 auto;padding:88px 40px 88px;display:flex;flex-direction:column;gap:104px;box-sizing:border-box} .site--narrow{max-width:760px;gap:56px;padding-top:72px} .site-label{font-family:var(--sg-mono);font-size:12px;letter-spacing:.14em;color:var(--sg-ink-soft);text-transform:uppercase;margin:0;font-weight:400} .site-mono{font-family:var(--sg-mono);font-size:13px;letter-spacing:.04em;color:var(--sg-ink-2)} .site-link{display:inline-flex;align-items:center;min-height:var(--sg-tap);color:var(--sg-accent);font-family:var(--sg-mono);font-size:13px;letter-spacing:.04em;text-underline-offset:5px} .site .sg-button{min-height:56px;padding:0 28px;font-size:15px;letter-spacing:.03em} .site .sg-button svg{flex:none} .site-lead{margin:0;font-size:21px;line-height:1.5;color:var(--sg-ink-2)} /* hero */ .site-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center} .site-hero__text{display:flex;flex-direction:column;gap:26px;min-width:0} .site-hero h1{margin:0;font-family:var(--sg-serif);font-size:96px;line-height:1;font-weight:400;letter-spacing:-.025em;color:var(--sg-ink)} .site-hero__sv{margin:-8px 0 0;font-family:var(--sg-serif);font-style:italic;font-size:24px;color:var(--sg-ink-soft)} .site-hero__cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-top:8px} .site-hero__cta .site-mono{padding-left:4px} /* sample card */ .site-card{background:var(--sg-card);border:1px solid var(--sg-line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:20px;box-shadow:0 1px 0 var(--sg-line)} .site-card__top{display:flex;justify-content:space-between;align-items:center} .site-card__top span{font-family:var(--sg-mono);font-size:11px;letter-spacing:.12em;color:var(--sg-ink-soft)} .site-card__bar{height:3px;background:var(--sg-line)}.site-card__bar i{display:block;width:33%;height:3px;background:var(--sg-accent)} .site-card p{margin:0} .site-card__q{font-size:20px;color:var(--sg-ink-2)} .site-card__sv{font-size:30px;line-height:1.35;color:var(--sg-ink)} .site-gap{display:inline-block;min-width:90px;border-bottom:2px solid var(--sg-correct);color:var(--sg-correct);text-align:center} .site-chips{display:flex;flex-wrap:wrap;gap:10px} .site-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:22px;border:1px solid var(--sg-line-input);font-size:19px;color:var(--sg-ink)} .site-chip.is-right{border:1.5px solid var(--sg-correct);background:var(--sg-correct-bg);color:var(--sg-correct)} .site-card__ok{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:var(--sg-correct-bg);color:var(--sg-correct);font-family:var(--sg-mono);font-size:13px;letter-spacing:.04em} .site-card__ok span{font-family:var(--sg-serif);font-size:17px;letter-spacing:0} /* how it works */ .site-sec{display:flex;flex-direction:column;gap:32px} .site-sec__head{padding-bottom:12px;border-bottom:1px solid var(--sg-line-strong)} .site-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px} .site-step{display:flex;flex-direction:column;gap:14px;min-width:0} .site-step__h{display:flex;align-items:baseline;gap:12px} .site-step__h span{font-family:var(--sg-mono);font-size:12px;color:var(--sg-ink-soft)} .site-step__h h3{margin:0;font-family:var(--sg-serif);font-weight:400;font-size:26px;line-height:1.2;color:var(--sg-ink)} .site-step>p{margin:0;font-size:18px;color:var(--sg-ink-2)} .site-mini{position:relative;padding:18px;background:var(--sg-card);border:1px solid var(--sg-line);border-radius:14px;display:flex;flex-direction:column;gap:14px} .site-mini p{margin:0;font-size:21px;line-height:1.4;color:var(--sg-ink)} .site-mini .site-chip{min-height:40px;padding:0 16px;font-size:18px} .site-tip{position:absolute;left:96px;top:-14px;padding:3px 10px;border-radius:8px;background:var(--sg-ink);color:var(--sg-paper);font-family:var(--sg-mono);font-size:12px;letter-spacing:.04em} .site-dotted{text-decoration:underline dotted var(--sg-accent);text-decoration-thickness:2px;text-underline-offset:5px} .site-bank{padding:14px 18px 8px} .site-bank__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--sg-line)} .site-bank__row span:first-child{font-size:20px} .site-bank__row span:last-child{font-family:var(--sg-mono);font-size:13px;color:var(--sg-ink-soft)} /* lessons panel */ .site-panel{background:var(--site-panel);color:var(--site-panel-ink);border-radius:20px;padding:56px 64px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:end} .site-panel__text{display:flex;flex-direction:column;gap:14px} .site-panel .site-label,.site-panel .site-mono{color:var(--site-panel-label)} .site-panel h2{margin:0;font-family:var(--sg-serif);font-size:52px;line-height:1.08;font-weight:400;letter-spacing:-.015em} .site-panel p{margin:0;font-size:21px;line-height:1.5} .site-panel__cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start} :root[data-theme="dark"] .site-panel .sg-button{background:#9CBDE0} .site-small{margin:0;font-family:var(--sg-mono);font-size:12px;letter-spacing:.04em;color:var(--sg-ink-soft)} .site-small a{color:var(--sg-accent);text-underline-offset:4px} /* page heads (lessons, about) */ .site-head{display:flex;flex-direction:column;gap:16px} .site-head h1{margin:0;font-family:var(--sg-serif);font-size:60px;line-height:1.05;font-weight:400;letter-spacing:-.02em;color:var(--sg-ink)} .site-list{margin:0;padding:0;list-style:none} .site-list li{display:grid;grid-template-columns:44px minmax(0,1fr);padding:18px 0;border-bottom:1px solid var(--sg-line)} .site-list li>span:first-child{font-family:var(--sg-mono);font-size:12px;color:var(--sg-ink-soft);padding-top:6px} .site-list b{display:block;font-weight:400;font-size:22px;line-height:1.25;color:var(--sg-ink)} .site-list li p{margin:4px 0 0;font-size:17px;color:var(--sg-ink-2)} .site-text p{margin:0 0 16px;font-size:20px;line-height:1.55;color:var(--sg-ink-2)} .site-text p:last-child{margin-bottom:0} .site-bullets{margin:0;padding:0 0 0 1.1em;font-size:20px;line-height:1.6;color:var(--sg-ink-2)} .site-bullets li{padding:2px 0} /* form */ .site-form{display:flex;flex-direction:column;gap:24px;background:var(--sg-card);border:1px solid var(--sg-line);border-radius:20px;padding:32px} .site-form p{margin:0} .site-field{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0} .site-field>span,.site-field legend{font-family:var(--sg-mono);font-size:12px;letter-spacing:.12em;color:var(--sg-ink);text-transform:uppercase;padding:0} .site-field legend{padding-bottom:8px} .site-field small{font-size:16px;color:var(--sg-ink-soft)} .site-field input[type=text],.site-field input[type=email],.site-field textarea{box-sizing:border-box;width:100%;min-height:52px;padding:0 16px;border:1px solid var(--sg-line-input);border-radius:12px;background:var(--sg-white);color:var(--sg-ink);font-family:var(--sg-serif);font-size:19px} .site-field textarea{padding:14px 16px;line-height:1.4;resize:vertical} .site-field input:focus,.site-field textarea:focus{outline:3px solid var(--sg-accent);outline-offset:1px;border-color:var(--sg-accent)} .site-levels{display:flex;flex-wrap:wrap;gap:8px} .site-levels label{position:relative} .site-levels input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer} .site-levels span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--sg-line-input);background:var(--sg-white);color:var(--sg-ink);font-family:var(--sg-mono);font-size:14px;letter-spacing:.06em} .site-levels input:checked+span{border:1.5px solid var(--sg-accent);background:var(--sg-accent-tint);color:var(--sg-accent)} .site-levels input:focus-visible+span{outline:3px solid var(--sg-accent);outline-offset:2px} .site-check{display:flex;align-items:flex-start;gap:12px;min-height:44px;font-size:17px;color:var(--sg-ink-2);cursor:pointer} .site-check input{flex:none;width:22px;height:22px;margin:3px 0 0;accent-color:var(--sg-accent)} .site-hp{position:absolute;left:-9999px} .site-sent{display:flex;flex-direction:column;gap:18px;background:var(--sg-card);border:1px solid var(--sg-line);border-radius:20px;padding:32px} .site-sent__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:22px;background:var(--sg-correct-bg);color:var(--sg-correct)} .site-sent h2{margin:0;font-family:var(--sg-serif);font-size:34px;line-height:1.1;font-weight:400;color:var(--sg-ink)} .site-sent p{margin:0;font-size:19px;color:var(--sg-ink-2)} .site-sent .sg-button{align-self:flex-start} /* module done card: lessons line */ .sg-lessonline{margin:18px 0 0;font-family:var(--sg-mono);font-size:13px;letter-spacing:.04em;color:var(--sg-ink-soft)} .sg-lessonline a{color:var(--sg-accent);text-underline-offset:4px} @media (max-width:900px){ .site-hero{grid-template-columns:minmax(0,1fr)} .site-hero .site-card{display:none} .site-three{grid-template-columns:minmax(0,1fr);gap:40px} .site-panel{grid-template-columns:minmax(0,1fr);gap:20px;padding:40px 32px;align-items:stretch} } @media (max-width:640px){ .site{padding:44px 20px 56px;gap:56px} .site--narrow{padding-top:40px;gap:44px} .site-hero__text{gap:20px} .site-hero h1{font-size:58px} .site-hero__sv{font-size:20px} .site-hero__cta{align-items:stretch} .site-hero__cta .site-mono{text-align:center;padding:0} .site-hero__text>.site-link{align-self:center} .site .sg-button{width:100%} .site-panel{padding:32px 24px;gap:18px} .site-panel h2{font-size:36px} .site-panel p{font-size:19px} .site-panel__cta{align-items:stretch}.site-panel__cta .site-mono{text-align:center} .site-small{text-align:center} .site-head h1{font-size:44px} .site-form,.site-sent{padding:24px 20px} .site-sent .sg-button{align-self:stretch} } .sg-site .sg-header__inner{max-width:1100px;padding-left:40px;padding-right:40px} @media (max-width:640px){.sg-site .sg-header__inner{padding-left:20px;padding-right:20px}} .site-panel .site-label{font-size:12px;line-height:1.5} .site-panel .site-mono{font-size:12px;letter-spacing:.06em} /* grammar pages (SEO) */ .gp-crumbs{font-family:var(--sg-mono);font-size:12px;letter-spacing:.04em;color:var(--sg-ink-soft);margin-bottom:-24px} .gp-crumbs a{color:var(--sg-accent);text-underline-offset:3px} .gp .site-head .sg-topic{font-family:var(--sg-mono);font-size:11px;letter-spacing:.12em} .gp .gl-term{margin-top:-6px} .gp-sec{display:flex;flex-direction:column;gap:14px} .gp-sec h2{margin:0;font-family:var(--sg-serif);font-weight:400;font-size:30px;line-height:1.2;color:var(--sg-ink)} .gp-sec>p{margin:0;font-size:20px;line-height:1.6;color:var(--sg-ink-2)} .gp-cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start} @media (max-width:640px){.gp-sec h2{font-size:25px}.gp-sec>p{font-size:18px}.gp .gl-table td,.gp .gl-table th{font-size:16px}} .gp-wrong{text-decoration:line-through;text-decoration-color:var(--sg-wrong);color:var(--sg-wrong-text)} .gp-author{margin:0;font-family:var(--sg-mono);font-size:12px;letter-spacing:.04em;color:var(--sg-ink-soft)} .gp-author a{color:var(--sg-accent);text-underline-offset:3px} .gp-all{color:var(--site-panel-label);text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center} .site-panel .site-mono a{color:var(--site-panel-label)} /* front page: levels first */ .site-hero--levels{grid-template-columns:minmax(0,1fr)} .site-hero__lead{margin:0;max-width:34ch;font-size:22px;line-height:1.45;color:var(--sg-ink-2)} .site-lvls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:-24px} .site-lvl{display:flex;flex-direction:column;gap:8px;padding:24px 24px 22px;background:var(--sg-card);border:1px solid var(--sg-line);border-radius:16px;color:var(--sg-ink);text-decoration:none;transition:transform .15s,border-color .15s,box-shadow .15s} .site-lvl:hover{transform:translateY(-3px);border-color:var(--sg-ink);box-shadow:0 6px 18px rgba(0,0,0,.08)} .site-lvl__code{font-family:var(--sg-serif);font-size:56px;line-height:1;letter-spacing:-.02em} .site-lvl__name{font-family:var(--sg-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sg-ink-soft)} .site-lvl__can{margin-top:6px;font-size:18px;line-height:1.45;color:var(--sg-ink-2);flex:1} .site-lvl__meta{font-family:var(--sg-mono);font-size:12px;letter-spacing:.04em;color:var(--sg-ink-soft)} .site-lvl__go{margin-top:8px;font-family:var(--sg-mono);font-size:14px;letter-spacing:.04em;color:var(--sg-accent)} .site-lvls__note{margin:-20px 0 0;font-size:17px;color:var(--sg-ink-2)} .site-lvls__note .site-mono{margin-left:10px} .site-three[data-show="a1"] [data-l="a2"],.site-three[data-show="a2"] [data-l="a1"]{display:none} .site-three [data-l]{animation:site-fade .25s ease} @keyframes site-fade{from{opacity:0}to{opacity:1}} .site-howtabs{display:flex;justify-content:center;gap:10px;margin-top:26px} .site-howtabs button{font-family:var(--sg-mono);font-size:14px;letter-spacing:.06em;min-width:64px;padding:8px 16px;border-radius:999px;border:1px solid var(--sg-line-strong);background:transparent;color:var(--sg-ink);cursor:pointer} .site-howtabs button[aria-pressed="true"]{background:var(--sg-ink);color:var(--sg-paper);border-color:var(--sg-ink)} .site-mini__q{font-size:17px!important;color:var(--sg-ink-2)!important} .site-pairs{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-family:var(--sg-serif);font-size:19px} .site-pairs__h{font-family:var(--sg-mono);font-size:11px;letter-spacing:.08em;color:var(--sg-ink-soft)} .site-ok{color:var(--sg-correct);font-size:18px} .site-minimap{width:220px;max-width:100%;height:auto;color:var(--site-panel-ink)} .site-panel__cta{display:flex;flex-direction:column;align-items:flex-start;gap:18px} @media (max-width:900px){.site-lvls{grid-template-columns:minmax(0,1fr);gap:14px}.site-lvl__code{font-size:44px}} @media (max-width:640px){.site-lvls{margin-top:-8px}.site-lvl{padding:18px}.site-hero__lead{font-size:19px}.site-lvls__note .site-mono{display:block;margin:6px 0 0}.site-lvls__note{margin:-8px 0 0}} .site-hero--levels h1{font-size:72px} .site-nowrap{white-space:nowrap} .site-hero--levels .site-hero__text{gap:18px} @media (max-width:640px){.site-hero--levels h1{font-size:48px}}