@charset "UTF-8";
:root{color-scheme:light;--paper:#f4f2e9;--ink:#323d32;--muted:#788172;--red:#b44732;--line:#ccd0bf}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
main{width:min(1120px,calc(100% - 64px),calc(230px + (100svh - 146px)*1.30909));margin:32px auto 24px;display:grid;grid-template-columns:190px minmax(0,1fr);column-gap:40px;grid-template-rows:auto 1fr auto}
header{grid-column:1;grid-row:1}
.eyebrow{font:9px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin:0 0 22px}
h1{font:normal 86px/.89 Georgia,"Times New Roman",serif;letter-spacing:-5px;margin:0 0 27px;max-width:190px}
h1 span{color:var(--red)}
.rule{font:16px/1.6 Georgia,"Times New Roman",serif;letter-spacing:.1px;margin:0;padding-top:21px;position:relative}
.rule:before{content:"";width:29px;height:2px;background:var(--red);position:absolute;top:0;left:0}
.table{position:relative;grid-column:2;grid-row:1/3;align-self:start;isolation:isolate;box-shadow:0 1px 0 #cad0be,0 12px 22px -19px #6575564d}
#board{display:block;width:100%;height:auto;aspect-ratio:720/550;touch-action:none;user-select:none;cursor:crosshair;outline:none}
#board:focus-visible{outline:2px solid var(--red);outline-offset:5px}
#thread{transition:stroke .14s}
#board.taut #thread{stroke:#d83821;stroke-width:3.7}
#board.taut .cursor-halo{stroke:#c33b22;stroke-width:1.4}
.bell .bell-disc,.bell .bell-glint,.bell .bell-rim,.bell .bell-mark,.bell .bell-ticks{transition:opacity .35s,fill .35s,stroke .35s}
.bell.rung .bell-disc{fill:transparent;stroke:#718971;stroke-width:.8}
.bell.rung .bell-glint,.bell.rung .bell-ticks{opacity:0}
.bell.rung .bell-rim{stroke:#9ead97;stroke-dasharray:1 4}
.bell.rung .bell-mark{fill:#658064;font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px}
.bell.rung{animation:ring-out .65s ease-out 1;transform-box:fill-box;transform-origin:center}
@keyframes ring-out{0%{filter:brightness(1.45)}100%{filter:brightness(1)}}
.under-table{grid-column:2;grid-row:3;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;min-height:56px;padding:18px 0 0}
#status{font-size:12px;line-height:1.5;margin:0;max-width:75%;color:#5c6958;min-height:36px}
.length{white-space:nowrap;margin:0;font:9px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:#77816e;text-align:right}
.length>span:first-child{font-size:17px;line-height:1;letter-spacing:-.5px;color:var(--ink);display:inline-block;margin-right:3px}
.length>span:last-child{display:block;margin-top:5px}
footer{grid-column:1;grid-row:2;align-self:end;padding-bottom:12px}
#instructions{font-size:12px;line-height:1.7;color:#616d5c;margin:28px 0 15px}
#instructions span{display:block;margin:7px 0}
.tools{display:flex;flex-direction:column;align-items:flex-start;gap:0}
button{-webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation}
.tools button{font:11px/1.4 ui-sans-serif,system-ui,sans-serif;color:var(--ink);background:transparent;border:none;min-height:44px;padding:10px 0;position:relative;text-align:left}
.tools button:after{content:"";position:absolute;bottom:9px;left:0;right:0;border-bottom:1px solid #a3ae99}
.tools #back{font-size:13px}
.tools #back span{font-size:11px;margin-left:7px}
.tools button:hover{color:var(--red)}
.tools button:hover:after{border-color:var(--red)}
.tools button:disabled{opacity:.38;cursor:default}
button:focus-visible{outline:2px solid var(--red);outline-offset:5px}
.fine{grid-column:1;grid-row:3;align-self:start;margin:18px 0 0;font:9px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;color:#818775;max-width:145px}
.ending{position:absolute;inset:15% 10%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 25px;text-align:center;background:#f4f2e9f5;box-shadow:0 8px 32px -18px #44533445;border:1px solid #d9ddcd;clip-path:polygon(0 0,calc(100% - 25px) 0,100% 25px,100% 100%,0 100%);animation:arrive .5s ease-out}
.ending[hidden]{display:none}
.ending:after{content:"";position:absolute;right:0;top:0;width:25px;height:25px;background:#dce2d3;clip-path:polygon(0 0,0 100%,100% 100%)}
.ending .eyebrow{margin-bottom:17px;color:#838d77}
.ending h2{font:normal clamp(27px,4vw,52px)/1.06 Georgia,"Times New Roman",serif;letter-spacing:-1.4px;margin:0 0 18px;color:var(--red)}
.ending p:not(.eyebrow){font:12px/1.7 ui-sans-serif,system-ui,sans-serif;margin:0 0 20px;color:#63705e}
.ending button{background:transparent;border:0;border-bottom:1px solid #a5b297;padding:12px 0 8px;font:11px/1.4 ui-sans-serif,system-ui,sans-serif;color:var(--ink);min-height:44px}
.ending button span{margin-left:20px;color:var(--red)}
@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:851px) and (max-height:670px){main{grid-template-columns:160px minmax(0,1fr);column-gap:26px;width:min(calc(100% - 48px),calc(186px + (100svh - 122px)*1.30909));margin-top:24px}h1{font-size:67px;max-width:160px;letter-spacing:-3px;margin-bottom:20px}.eyebrow{margin-bottom:16px;font-size:8px}.rule{font-size:14px;padding-top:13px}#instructions{font-size:11px;line-height:1.5;margin-top:18px}.tools button{min-height:37px}footer{padding-bottom:0}.fine{font-size:8px}}
@media(max-width:850px){main{display:block;width:min(660px,calc(100% - 40px));margin:23px auto}header{display:flex;justify-content:space-between;gap:22px;align-items:flex-end;margin-bottom:24px}h1{font-size:65px;max-width:none;letter-spacing:-3.6px;margin:0}.eyebrow{font-size:8px;letter-spacing:1.6px;margin-bottom:13px}.rule{font-size:14px;line-height:1.6;white-space:nowrap;flex-shrink:0;margin-bottom:1px;padding-top:16px}.under-table{min-height:60px;padding-top:16px}footer{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border-top:1px solid #d6dacb;padding-top:14px}#instructions{font-size:11px;margin:0;max-width:360px}#instructions span{display:inline;margin:0}.tools{flex-shrink:0;align-items:flex-end}.tools button{padding-top:6px;min-height:40px}.fine{max-width:none;margin-top:12px;font-size:8px}#status{font-size:11px}.ending{inset:12% 9%}}
@media(max-width:470px){main{width:calc(100% - 28px);margin-top:20px}header{gap:12px;margin-bottom:20px}h1{font-size:52px;max-width:190px;letter-spacing:-3px}.eyebrow{font-size:7px;letter-spacing:1.3px;margin-bottom:12px}.rule{font-size:11px;line-height:1.7;padding-top:12px;margin-bottom:1px}.rule:before{width:22px;height:1px}#instructions{max-width:215px;font-size:10px;line-height:1.7}#instructions span{display:none}footer{gap:16px}.tools button{font-size:10px}.tools #back span{font-size:10px;margin-left:4px}.length{font-size:8px}.length>span:first-child{font-size:15px}.under-table{gap:10px;min-height:66px}#status{max-width:73%;font-size:10px}.ending{inset:8% 9%;padding:14px}.ending .eyebrow{font-size:7px;margin-bottom:9px}.ending h2{font-size:30px;margin-bottom:9px}.ending p:not(.eyebrow){font-size:10px;margin-bottom:5px}.ending button{font-size:10px;padding-top:7px}.board-annotation{font-size:8px}}
@media(max-width:600px){.eyebrow{font-size:11px;letter-spacing:1.1px}.rule{font-size:14px}.fine{font-size:11px;line-height:1.6}#instructions{font-size:14px;line-height:1.65;max-width:none}#instructions span{display:none}footer{gap:19px;padding-top:18px}.tools button,.tools #back,.tools #back span{font-size:14px;min-height:44px}.tools #back span{margin-left:3px}.tools button{padding:10px 0}.under-table{min-height:83px;padding-top:17px;gap:14px}#status{font-size:14px;line-height:1.5;max-width:73%}.length{font-size:12px}.length>span:first-child{font-size:20px}.board-annotation{display:none}.home text{font-size:24px;letter-spacing:1.2px}.bell .bell-mark,.bell.rung .bell-mark{font-size:22px}.ending .eyebrow{font-size:11px}.ending p:not(.eyebrow){font-size:14px;line-height:1.45}.ending button{font-size:14px;min-height:44px}.ending{inset:5% 6%;padding:12px}.ending h2{font-size:30px;line-height:1.02;margin-bottom:7px}.ending .eyebrow{margin-bottom:7px}}
@media(max-width:370px){h1{font-size:44px;letter-spacing:-2.5px}.rule{font-size:14px}.eyebrow{font-size:11px}footer{gap:13px}#instructions{font-size:14px}.ending h2{font-size:26px}.ending .eyebrow{font-size:11px}.ending p:not(.eyebrow){font-size:14px}.ending button{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}