:root{font-family:Arial,Helvetica,sans-serif;color:#17313a;background:#f2efe6;font-synthesis:none;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input,summary{touch-action:manipulation}button{cursor:pointer;border:1px solid #bac3b8;background:transparent;color:inherit;padding:10px 15px;border-radius:4px;min-height:44px;transition:background .15s}button:hover{background:#dfe7d7}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #c76d36;outline-offset:3px}input{width:100%;border:1px solid #bac3b8;background:#fbfaf5;color:#17313a;border-radius:4px;padding:11px;min-height:44px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1500px;margin:auto;padding:28px 48px;border-bottom:1px solid #cbd0c3}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:11px;letter-spacing:2px;line-height:1.5}.brandmark{display:grid;place-items:center;background:#17313a;color:#d7eab3;font-size:34px;height:46px;width:46px;border-radius:50%}.edition{font-size:10px;letter-spacing:2px;text-align:center}.edition span{color:#61746d}.local{font-size:11px;color:#49614c;border:1px solid #c7d1bd;padding:8px 12px;border-radius:30px}main{max-width:1404px;margin:auto;padding:0 48px}.intro{display:flex;justify-content:space-between;align-items:center;padding:52px 0 42px}.eyebrow,.tiny{font-size:10px;font-weight:700;letter-spacing:2px}.eyebrow{color:#5c7468}h1{font:normal clamp(48px,6vw,84px) / 1 Georgia,serif;letter-spacing:-3px;margin:18px 0 22px}h1 em{color:#526b4c}h2{font: 32px/1.2 Georgia,serif;margin:16px 0}h3{font: 25px Georgia,serif;margin:10px 0}.lede{font-size:15px;color:#52655f;line-height:1.7}.principle{border-left:1px solid #c3cbb9;padding:6px 32px;margin-right:25px}.principle p{font:24px/1.35 Georgia,serif}.principle b{font-weight:400;color:#56723c}.rule-note{font-size:11px;color:#65756d;line-height:1.8}.tabs{display:flex;align-items:center;gap:8px;border-bottom:1px solid #bdc8b7;padding-bottom:14px}.tabs button{font-size:12px;font-weight:700}.tabs button[aria-pressed=true]{background:#17313a;color:#f1f4de;border-color:#17313a}.tabs>span{font-size:10px;margin-left:auto;text-align:right;color:#62716a;max-width:210px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;padding-top:32px}.stage{background:#fcfbf7;border:1px solid #d7dcce;border-radius:9px;padding:30px;align-self:start}.section-top{display:flex;justify-content:space-between;align-items:center}.section-top>.tiny{color:#738276;font-size:9px}.puzzle-tabs{display:flex;gap:8px;margin:22px 0 28px}.puzzle-tabs button{font-size:11px;flex:1;text-align:left;padding:10px}.puzzle-tabs button span{display:block;font-size:9px;color:#79846d;margin-bottom:5px}.puzzle-tabs button[aria-pressed=true]{background:#e7eddd;border-color:#8c9d77}.story{font-size:13px;color:#5b6d64;max-width:610px}.roll{position:relative;background:#17313a;border-radius:6px;margin:24px 0 20px;padding:24px 15px 27px 53px;overflow:hidden}.roll svg{width:100%;height:175px;display:block}.gridline{stroke:#49615f;stroke-width:.5}.roll-label{position:absolute;left:12px;top:23px;bottom:36px;font-size:7px;letter-spacing:1px;color:#b3c7be;display:flex;flex-direction:column;justify-content:space-between}.roll-caption{position:absolute;bottom:11px;right:15px;color:#c5d7c7;font-size:8px;letter-spacing:2px}.transport{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.primary{background:#17313a;color:#fff;border-color:#17313a}.primary:hover{background:#33534e}.transport>span{font-size:10px;color:#6d7c72;margin-left:auto}.transpose{margin:27px 0 23px;padding:21px 0;border-top:1px solid #dbe0d3;border-bottom:1px solid #dbe0d3}.transpose label{font-size:12px;display:flex;justify-content:space-between}.transpose strong{font-size:11px;color:#617b46}.transpose input{padding:0;background:transparent;accent-color:#5d784b;border:0}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:#697a6c}.presets{font-size:10px;margin-top:12px;display:flex;align-items:center;gap:8px}.presets button{padding:4px 13px;min-height:36px}details{font-size:12px}summary{cursor:pointer;min-height:44px;padding:12px 0;font-weight:700}details p{color:#5e7066}.step-list{display:grid;grid-template-columns:repeat(2,1fr);padding-left:22px;gap:8px;font-size:11px}.answer{border-top:1px solid #dbe0d3;padding-top:22px;margin-top:12px}.answer label{font-family:Georgia,serif;font-size:22px}.answer>div:first-of-type{display:flex;gap:8px;margin:14px 0 7px}.answer input{font-size:12px;letter-spacing:1px}.answer-actions{display:flex;gap:8px}.answer-actions button{border:0;font-size:11px;padding-left:0;text-decoration:underline}.solution{font:26px Georgia,serif;color:#426b38}.codebook{background:#e3e9d8;border:1px solid #ccd5bf;border-radius:9px;padding:25px}.codebook>p,.archive>p{font-size:12px;color:#52665a}.signs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:22px 0}.signs>div{display:flex;align-items:center;justify-content:space-between;background:#f7f7ed;border:1px solid #c7d0ba;padding:12px;border-radius:4px}.signs strong{font:28px Georgia,serif}.signs span{font-size:13px;font-weight:700;text-align:right}.signs small{display:block;font-size:9px;font-weight:400;color:#657b60}.archive{padding:26px 4px}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.export-grid button{font-size:10px;text-align:left;padding:8px 10px}.file{display:block;font-size:11px;border:1px dashed #b0bba6;border-radius:5px;padding:12px}.file input{font-size:10px;margin-top:8px;padding:4px;background:transparent;border:0}.local-actions{display:flex;flex-wrap:wrap;margin-top:12px;gap:4px}.local-actions button{font-size:10px;padding:7px 9px;border:0;text-decoration:underline}.editor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:25px 0}.editor-grid>div{background:#eaf0e2;border:1px solid #c7d0bd;padding:12px;border-radius:5px}.editor-grid label{display:block;font-size:10px}.editor-grid input{margin:4px 0 8px;padding:8px}.block-label{display:block;font-size:13px}.block-label input{margin-top:8px}.help{font-size:11px;color:#647461}.settings{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.settings label{font-size:10px}.settings input{margin-top:6px}.error{color:#a43d28;font-size:12px}.valid{color:#406a32;font-size:12px}.status{background:#e1e8d6;border:1px solid #c8d3bc;border-radius:5px;padding:14px 18px;font-size:12px;margin:25px 0;min-height:50px}.status span{color:#6f8f45;margin-right:5px}footer{display:flex;justify-content:space-between;gap:35px;border-top:1px solid #cbd3c0;padding:20px 0 40px;color:#68796c;font-size:10px}footer details{max-width:580px;font-size:10px}footer button{font-size:10px;margin-right:8px}@media(min-width:1500px){.intro{padding-top:70px}}@media(max-width:1050px){main{padding:0 24px}header{padding:22px 24px}.workspace{grid-template-columns:minmax(0,1fr) 270px;gap:20px}.stage{padding:22px}.puzzle-tabs{flex-wrap:wrap}.principle{margin-right:0;padding-right:0}.tabs>span{display:none}.editor-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.edition{display:none}.intro{padding-top:36px;gap:20px;align-items:flex-start}.principle{display:none}.workspace{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:20px}.archive{padding:15px 0}.tabs button{flex:1;font-size:11px}.codebook{padding:20px}.roll{padding-left:42px}.puzzle-tabs button{min-width:90px}.transport>span{width:100%;margin:6px 0}footer{flex-direction:column;gap:8px}}@media(max-width:500px){main{padding:0 16px}header{padding:18px 16px}.brand,.local{font-size:9px}h1{font-size:56px}.stage{padding:18px}.sidebar,.settings{grid-template-columns:1fr}.answer>div:first-of-type{flex-wrap:wrap}.answer input{min-width:0}.answer>div:first-of-type button{width:100%}.step-list{grid-template-columns:1fr}.range-labels{font-size:8px}.transpose label{font-size:10px}.puzzle-tabs{gap:5px}.puzzle-tabs button{font-size:9px;min-width:75px}.codebook .signs{grid-template-columns:repeat(4,1fr)}.signs>div{flex-direction:column;padding:8px;gap:5px}.signs span{text-align:center}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}