:root{--paper:#f5f3eb;--white:#fffef9;--ink:#173d3a;--muted:#5d6c66;--line:#dedfd3;--teal:#2f7469;--soft:#e9f0e8;--gold:#88602a;--red:#a13e2b;--shadow:0 12px 40px #173d3a06}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.55}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{min-height:44px;padding:9px 14px;border:1px solid var(--line);border-radius:7px;background:var(--white);color:var(--ink);cursor:pointer;line-height:1.3}button:hover{background:var(--soft);border-color:#94aea4}button:disabled{opacity:.43;cursor:default}button.primary{background:var(--ink);border-color:var(--ink);color:#fff}button.primary:hover{background:#285d55}.quiet{border-color:transparent;background:transparent;padding:8px 10px}a{color:inherit;text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #b27621;outline-offset:3px}input,select{min-height:44px;border:1px solid var(--line);border-radius:6px;padding:8px;background:var(--white);color:var(--ink);max-width:100%}input[type=checkbox]{min-height:0;width:18px;height:18px;accent-color:var(--teal);vertical-align:middle;margin-right:7px}input[type=range]{width:100%;accent-color:var(--teal)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;line-height:1.15}h1{font-size:clamp(42px,5vw,68px);letter-spacing:-2.3px;margin-bottom:15px}h1 span{font-style:italic;color:var(--teal)}h2{font-size:30px;margin-bottom:5px}h3{font-size:25px;margin-bottom:12px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;margin-bottom:12px}.subtle{font-size:12px;color:var(--muted)}.sitehead{max-width:1240px;margin:auto;padding:25px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:20px}.brand{text-decoration:none;display:flex;gap:11px;align-items:center;font-size:14px;letter-spacing:1.5px;font-weight:650}.brandmark{border:1px solid var(--ink);width:37px;height:40px;display:grid;place-items:center;font:italic 29px Georgia}.brandweb{font-weight:400}.brand small{display:block;font-size:8px;letter-spacing:1.7px;color:var(--muted);margin-top:2px}.sitehead nav{display:flex;align-items:center;gap:10px;font-size:12px}.sitehead nav>a{margin-right:12px}main{max-width:1240px;margin:auto;padding:0 32px}.hero{padding:43px 0 30px;display:flex;justify-content:space-between;align-items:center;gap:20px}.hero .eyebrow{color:var(--gold)}.tagline{color:var(--muted);margin-bottom:0;font-size:15px}.phonebreak{display:none}.heroStamp{width:240px;flex-shrink:0;transform:rotate(-4deg)}.heroStamp svg{width:180px;display:block;margin:0 auto 15px;overflow:visible}.heroStamp path{stroke:#99b4a8;fill:none;stroke-width:2}.heroStamp circle{fill:var(--paper);stroke:var(--teal);stroke-width:1.5}.heroStamp text{fill:var(--ink);font:19px Georgia;text-anchor:middle}.heroStamp span{display:block;text-align:center;font-size:8px;letter-spacing:1.3px;color:var(--muted)}.topbar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:15px 0 22px;gap:12px}.tabs{display:flex;gap:5px;flex-wrap:wrap}.tabs button{border:0;background:transparent;font-size:13px}.tabs button.active{background:var(--ink);color:white}.tabs span{font-size:10px;padding:2px 5px;background:#ffffff20;border-radius:4px;margin-left:5px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 284px;align-items:start;gap:24px}.puzzlecard{position:relative;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;min-width:0}.puzzlehead{padding:25px 27px 17px;display:flex;justify-content:space-between;gap:15px}.puzzlehead .eyebrow{color:var(--teal);margin-bottom:8px}.puzzlehead h2{font-size:30px}.puzzlehead .subtle{margin:8px 0 0}.clockbox{text-align:right;font-size:13px;flex-shrink:0}.clockbox>span{font-variant-numeric:tabular-nums;letter-spacing:1px;display:block;margin:3px 0 4px}.clockbox button{font-size:12px}.board-wrap{position:relative;background:#f1f5ed;border-block:1px solid #e6ebdf}#boardViewport{position:relative;overflow:auto;max-height:650px;min-height:310px;overscroll-behavior:contain;scrollbar-width:thin;touch-action:pan-x pan-y;background-image:radial-gradient(#cbd8c6 1px,transparent 1px);background-size:20px 20px}#boardCanvas{position:relative;margin:auto}#bridgeSvg,#islands{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#bridgeSvg line{stroke:var(--teal);stroke-width:3;stroke-linecap:round}#bridgeSvg .ghost{stroke:#b8c8bc;stroke-dasharray:3 7;stroke-width:1.4}#bridgeSvg .hintline{stroke:#b47f2b;stroke-width:6;opacity:.48}#islands button,.lessonboard .island{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);width:46px;height:46px;min-height:46px;padding:0;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1.5px solid #668a79;border-radius:50%;background:var(--white);box-shadow:0 3px 0 #173d3a0b;font-size:21px;font-family:Georgia,serif;line-height:1}#islands button small{font:9px system-ui;margin-top:2px;color:var(--muted)}#islands button.complete,.legendcircle.complete{background:#dae9dc;border-color:var(--teal)}#islands button.selected,.legendcircle.selected{background:var(--ink);color:white;border-color:var(--ink)}#islands button.selected small{color:#fff}#islands button.possible{outline:2px dashed #7d9e7c;outline-offset:3px}#islands button.over,.legendcircle.over{background:#f8ded3;border-color:var(--red);color:var(--red)}#islands button.hinted{box-shadow:0 0 0 5px #d4af62;z-index:2}#boardViewport.panning{cursor:grab}#boardViewport.panning button{pointer-events:none}.boardtools,.movetools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:13px 20px;border-bottom:1px solid var(--line)}.boardtools{justify-content:space-between;font-size:12px}.boardtools button{font-size:12px}.toolgroup{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.toolgroup>span{min-width:38px;text-align:center;font-size:12px}.switch{display:flex;align-items:center;cursor:pointer;min-height:44px;font-size:12px;white-space:nowrap}.movetools{padding-block:12px;gap:8px}.movetools button{font-size:12px;flex:1;white-space:nowrap}.hintbutton{background:#f3edda;border-color:#daca9f}.message{font-size:13px;padding:16px 24px 4px;min-height:55px}.message.error{color:var(--red)}.legend{display:flex;gap:12px;flex-wrap:wrap;padding:12px 24px 19px;font-size:10px;color:var(--muted)}.legend>span{display:flex;gap:5px;align-items:center}.legendcircle{width:13px;height:13px;border:1px solid #668a79;background:var(--white);border-radius:50%;display:inline-block}.bottomactions{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-top:1px solid var(--line);font-size:11px;gap:5px}.bottomactions button{font-size:11px}.bottomactions span{color:var(--muted);text-align:center}aside{display:grid;gap:16px}.sidecard{border:1px solid var(--line);border-radius:10px;padding:23px;background:#f9f8f2}.sidecard p{font-size:13px;color:var(--muted);line-height:1.65}.sidecard .eyebrow{font-size:9px;color:var(--teal);line-height:1.4;margin-bottom:15px}.introcard h3{font-size:29px}.progressline{display:flex;justify-content:space-between;font-size:11px;margin-top:26px}.progressline strong{font-weight:500;color:var(--muted)}.progressbar{height:5px;background:#dce3d7;border-radius:3px;margin:10px 0}.progressbar span{display:block;height:100%;width:0;background:var(--teal);border-radius:3px;transition:width .25s}.introcard .subtle{font-size:11px;margin-bottom:0}.dailycard{background:#e8eee3;position:relative}.dailycard .eyebrow{padding-right:25px}.dailyicon{position:absolute;right:20px;top:17px;color:var(--gold);font-size:25px}.dailycard h3{font-size:23px}.dailycard label{display:block;font-size:11px;margin-bottom:6px}.dateRow{display:flex;gap:6px}.dateRow input{width:100%;min-width:0;font-size:12px}.dailycard small{display:block;font-size:10px;color:var(--muted);margin-top:13px}.narrationcard{padding:18px 20px}.narrationtitle{display:flex;justify-content:space-between;align-items:center;gap:10px}.narrationtitle h3{font-size:20px;margin:0}.narrationcard p{font-size:11px}.narrationcard button{font-size:11px;padding-inline:8px}.narrationcard .subtle{margin:10px 0 0}footer{padding:29px 0 24px;display:flex;justify-content:space-between;gap:15px;font-size:10px;color:var(--muted)}footer span:first-child{letter-spacing:1px}footer b{margin:0 6px}dialog{border:1px solid var(--line);border-radius:13px;background:var(--white);color:var(--ink);width:min(900px,calc(100% - 28px));max-height:90dvh;padding:28px;box-shadow:0 20px 90px #071e2944;overflow:auto}dialog::backdrop{background:#163d386b;backdrop-filter:blur(3px)}.dialoghead{display:flex;justify-content:space-between;align-items:start;gap:18px;margin-bottom:20px}.dialoghead button{font-size:25px;width:44px;padding:0;flex-shrink:0}.dialoghead h2{font-size:32px}.libraryfilters{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:14px}.libraryfilters label{font-size:11px}.libraryfilters select,.libraryfilters input{display:block;width:100%;margin-top:6px}#libraryGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.puzzleitem{text-align:left;padding:17px;min-height:130px;display:flex;flex-direction:column;gap:6px}.puzzleitem strong{font:21px Georgia}.puzzleitem .eyebrow{font-size:9px;margin:0}.puzzleitem small{font-size:10px;color:var(--muted)}.puzzleitem.is-complete{border-left:3px solid var(--teal)}.settingsgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}fieldset{border:1px solid var(--line);border-radius:8px;margin:0 0 20px;padding:18px}legend{font:20px Georgia}fieldset label{display:block;margin-bottom:13px;font-size:13px}fieldset label:last-child{margin-bottom:0}fieldset select{display:block;width:100%;margin-top:6px}#helpDialog{max-width:700px}#helpDialog p,.rules{font-size:14px;line-height:1.8}#helpDialog h3{margin-top:25px}.rules{padding-left:22px}.rules li{padding-left:8px;margin-bottom:12px}#hintPanel{border-top:1px solid #ccd9ca;margin-top:20px;padding-top:20px}#hintPanel p{color:var(--ink)}#hintPanel button{width:100%;margin-top:10px;font-size:12px}#proofDetails{font-size:12px;margin-block:12px}#proofList{padding-left:19px;font-size:11px}#proofList li{margin-bottom:9px}.notice{background:#fff0cf;border:1px solid #d7b77a;border-radius:8px;padding:12px;margin-bottom:16px;font-size:13px}.winpanel{background:#e2ecdF;text-align:center;padding:30px;border-top:1px solid var(--line)}.winpanel h3{font-size:33px}.winpanel p{font-size:13px}.winpanel .eyebrow{font-size:10px}#pauseOverlay{position:absolute;inset:0;background:#edf2e8f9;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px}#pauseOverlay strong{font:29px Georgia}#pauseOverlay p{margin-top:10px}#confirmDialog{max-width:460px}.lessonboard{position:relative;max-width:100%;overflow:auto;background:#edf3e7;border:1px solid var(--line);border-radius:10px;margin:20px 0}.lessonboard svg{position:absolute;inset:0;pointer-events:none}.lessonboard svg line{stroke:var(--teal);stroke-width:3}#lessonFeedback{min-height:45px;font-size:13px}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip:focus{position:fixed;top:5px;left:5px;background:white;padding:12px;z-index:20}.highcontrast{--paper:#fff;--white:#fff;--ink:#001d17;--muted:#30453e;--line:#486258;--teal:#005441;--soft:#e2eddf;--red:#8f1b0d}.highcontrast #boardViewport{background-color:#fff}.highcontrast #islands button{border-width:2px}.reducedmotion *{scroll-behavior:auto!important;transition:none!important;animation:none!important}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 245px;gap:18px}.sidecard{padding:19px}.heroStamp{width:210px}.movetools button{flex-basis:40%}}@media(max-width:760px){.sitehead{padding:17px 18px;gap:10px}.sitehead nav{gap:2px}.sitehead nav>a{font-size:11px;margin-right:0}.sitehead nav button{font-size:11px;padding:7px}.brandmark{display:none}.brand{font-size:12px}.brand small{font-size:6px}main{padding:0 16px}.hero{padding:30px 0 24px}.heroStamp{display:none}.hero .eyebrow{font-size:8px;letter-spacing:1.7px}h1{font-size:47px;letter-spacing:-2px}.tagline{font-size:13px}.phonebreak{display:block}.workspace{grid-template-columns:1fr;gap:16px}.topbar{padding-block:12px 17px;align-items:start;flex-wrap:wrap}.tabs{width:100%;gap:0;justify-content:space-between}.tabs button{padding:9px 10px;font-size:11px}.tabs span{display:none}.puzzlehead{padding:20px 18px 16px}.puzzlehead h2{font-size:27px}.puzzlehead .eyebrow{font-size:9px}.puzzlehead .subtle{font-size:10px}.clockbox{font-size:11px}.clockbox button{padding:4px;font-size:10px}.boardtools{padding:10px 12px;gap:6px}.boardtools .quiet{padding-inline:5px}.toolgroup{gap:5px}.boardtools button{padding-inline:9px}.movetools{padding:11px 12px}.movetools button{flex-basis:40%;font-size:12px}.message{padding:14px 17px 3px;font-size:12px}.legend{padding:12px 17px;gap:10px;font-size:9px}.bottomactions{padding:7px;gap:1px;font-size:9px}.bottomactions button{font-size:10px;padding-inline:5px}.bottomactions span{max-width:115px}aside{grid-template-columns:1fr 1fr;gap:12px}.introcard{grid-column:1/-1}.introcard h3 br{display:none}.introcard h3 br:after{content:' '}.introcard h3{font-size:26px}.introcard .progressline{margin-top:15px}.narrationcard,.dailycard{grid-column:1/-1}.sidecard{padding:20px}.dailycard h3{font-size:25px}.dateRow input{font-size:14px}.narrationcard p{font-size:12px}.narrationcard button{font-size:12px}footer{flex-direction:column;gap:7px;font-size:9px;padding-block:24px}.libraryfilters{grid-template-columns:1fr 1fr;gap:10px}.libraryfilters label:last-child{grid-column:1/-1}#libraryGrid{grid-template-columns:1fr 1fr}.puzzleitem{padding:12px;min-height:130px}.puzzleitem strong{font-size:18px}.settingsgrid{grid-template-columns:1fr;gap:0}dialog{padding:20px;max-height:92dvh}.dialoghead h2{font-size:27px}#tutorialDialog h2{font-size:26px}.lessonboard .island{width:44px;height:44px}#boardViewport{max-height:520px}}@media(max-width:370px){.sitehead{padding-inline:12px}.brand small{display:none}.sitehead nav>a{max-width:83px;line-height:1.3}.sitehead nav button{padding-inline:5px}h1{font-size:41px}.tabs button{padding-inline:7px}#libraryGrid{grid-template-columns:1fr}}@media(max-height:500px) and (orientation:landscape){#boardViewport{max-height:290px}.hero{padding-block:18px}dialog{max-height:94dvh}}

#islands button.selected{outline:3px double var(--ink);outline-offset:3px}

/* Detailed tutorial and exact example diagrams. */
#guideDialog{width:min(760px,calc(100vw - 24px));max-height:90dvh;overflow:auto}
#guideDialog .eyebrow{font-size:13px;letter-spacing:1px}
#guideDialog .guide-label{display:block;font-size:16px;font-weight:600;margin-bottom:7px}
#guideTopic{display:block;width:100%;max-width:100%;min-height:46px;font-size:16px;margin-bottom:22px}
#guideBody p,#guideBody li,#guideBody figcaption{font-size:17px;line-height:1.7}
#guideBody p{margin:0 0 16px}#guideBody ul,#guideBody ol{padding-left:24px;margin:0 0 20px}#guideBody li{margin:9px 0}
#guideBody figure{margin:20px 0;padding:16px;background:var(--soft);border:1px solid var(--line);border-radius:10px}
#guideBody svg{display:block;width:100%;max-width:350px;height:auto;margin:0 auto 12px;color:var(--ink)}
.guide-navigation{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.guide-navigation button{flex:1;min-height:48px;font-size:16px}#guidePractice{font-size:15px;margin-top:14px}
@media(max-width:760px){.sitehead{flex-wrap:wrap}.sitehead nav{flex-wrap:wrap;max-width:100%}#guideBody p,#guideBody li,#guideBody figcaption{font-size:16px}#guideDialog h2{font-size:27px}}