:root{--gray-dark: #9c9c9c;--gray-darker: #282828;--gray-light: #ddd;--gray-lighter: #eee;--gray: #bbb;--grid-gap: 10px;--piece-diameter-md: 34px;--piece-diameter-sm: 32px;--piece-diameter-xs: 30px;--piece-diameter: 26px;--point-diameter-large: 8px;--point-diameter-small: 5px;--point-diameter: 4px;--point-surround-large: 16px;--point-surround: 12px;--surround: 150%;--theme-point-diameter: 7px;--theme-point-diameter-large: 8px;color-scheme:light;--page-bg: #fff;--text: var(--gray-darker);--line: var(--gray-light);--point-bg: #fff;--point-border: var(--gray);--piece-w-bg: #fff;--piece-w-border: var(--gray-dark);--piece-b-bg: #000;--piece-b-border: #000;--piece-shadow: var(--gray);--surround-border: var(--gray-light);--button-bg: var(--gray-lighter);--button-bg-hover: var(--gray-light)}:root[data-theme=dark]{color-scheme:dark;--page-bg: #1b1b1b;--text: #dcdcdc;--line: #414141;--point-bg: #2b2b2b;--point-border: #6a6a6a;--piece-w-bg: #e9e9e9;--piece-w-border: #a8a8a8;--piece-b-bg: #0d0d0d;--piece-b-border: #7a7a7a;--piece-shadow: #000;--surround-border: #575757;--button-bg: #333;--button-bg-hover: #3f3f3f}body{margin:0;font-family:sans-serif;color:var(--text);background:var(--page-bg);transition:background-color .2s ease-in-out,color .2s ease-in-out}#app{height:100vh;width:30em;max-width:90%;margin:0 auto}.app-inner{height:100vh;display:flex;flex-direction:column;justify-content:center}.title{margin:2em 0 .8em}button{display:block;margin:3em 0 0;padding:1em 2em;font-family:sans-serif;text-transform:uppercase;background:var(--button-bg);color:var(--text);border:none;cursor:pointer}button:hover{background:var(--button-bg-hover)}.grid{position:relative;left:50%;transform:translate(-50%);margin:2em 0;display:grid;grid-template-columns:repeat(7,1fr);column-gap:var(--grid-gap);row-gap:var(--grid-gap);max-width:55vh}.grid>span{height:0;padding-bottom:100%}.point{display:block;cursor:pointer;position:relative;font-family:monospace;font-size:1.5em}.point[data-lines|=line]{position:relative}.point[data-lines|=line]:before{content:"";position:absolute;background:var(--line);pointer-events:none}.point[data-lines=line-0]:before{top:50%;left:50%;transform:translate(-50%);height:calc(600% + (6 * var(--grid-gap)));width:1px}.point[data-lines=line-9]:before{top:50%;left:50%;transform:translate(-50%);height:calc(400% + (4 * var(--grid-gap)));width:1px}.point[data-lines=line-18]:before{top:50%;left:50%;transform:translate(-50%);height:calc(200% + (2 * var(--grid-gap)));width:1px}.point[data-lines=line-6]:before{top:50%;left:50%;transform:translateY(-50%);width:calc(600% + (6 * var(--grid-gap)));height:1px}.point[data-lines=line-15]:before{top:50%;left:50%;transform:translateY(-50%);width:calc(400% + (4 * var(--grid-gap)));height:1px}.point[data-lines=line-24]:before{top:50%;left:50%;transform:translateY(-50%);width:calc(200% + (2 * var(--grid-gap)));height:1px}.point[data-lines=line-8]:before{bottom:50%;left:50%;transform:translate(-50%);height:calc(600% + (6 * var(--grid-gap)));width:1px}.point[data-lines=line-17]:before{bottom:50%;left:50%;transform:translate(-50%);height:calc(400% + (4 * var(--grid-gap)));width:1px}.point[data-lines=line-26]:before{bottom:50%;left:50%;transform:translate(-50%);height:calc(200% + (2 * var(--grid-gap)));width:1px}.point[data-lines=line-2]:before{top:50%;right:50%;transform:translateY(-50%);width:calc(600% + (6 * var(--grid-gap)));height:1px}.point[data-lines=line-11]:before{top:50%;right:50%;transform:translateY(-50%);width:calc(400% + (4 * var(--grid-gap)));height:1px}.point[data-lines=line-20]:before{top:50%;right:50%;transform:translateY(-50%);width:calc(200% + (2 * var(--grid-gap)));height:1px}.point[data-lines=line-10]:before,.point[data-lines=line-16]:before{top:50%;left:50%;transform:translateY(-50%) translate(-50%);height:calc(200% + (2 * var(--grid-gap)));width:1px}.point[data-lines=line-12]:before,.point[data-lines=line-14]:before{top:50%;left:50%;transform:translateY(-50%) translate(-50%);width:calc(200% + (2 * var(--grid-gap)));height:1px}.point:after{content:"";position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%);width:var(--point-diameter);height:var(--point-diameter);background:var(--point-bg);border:1px solid var(--point-border);box-shadow:1px 1px #0001;border-radius:50%;z-index:1;pointer-events:none}@media (min-width: 992px){.point:after{width:var(--point-diameter-large);height:var(--point-diameter-large)}}.piece{display:block;position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%);z-index:2}.piece.w,.piece.b{width:var(--piece-diameter);height:var(--piece-diameter);border-radius:50%;box-shadow:1px 1px 0 var(--piece-shadow)}@media (min-width: 400px){.piece.w,.piece.b{width:var(--piece-diameter-xs);height:var(--piece-diameter-xs)}}@media (min-width: 768px){.piece.w,.piece.b{width:var(--piece-diameter-sm);height:var(--piece-diameter-sm)}}@media (min-width: 992px){.piece.w,.piece.b{width:var(--piece-diameter-md);height:var(--piece-diameter-md)}}.piece.w{background:var(--piece-w-bg);border:1px solid var(--piece-w-border)}.piece.b{background:var(--piece-b-bg);border:1px solid var(--piece-b-border)}.controls{display:flex;justify-content:"space-between";width:65%;margin:0 auto;cursor:default}.controls>p,.controls>div{flex:1;text-align:center}.action{font-size:.85em;opacity:.7}@media (min-width: 400px){.action{font-size:.9em}}@media (min-width: 768px){.action{font-size:.95em}}.end .turn-pieces-container,.end .action{opacity:0}.turn-pieces-container{display:flex}.turn-piece-container{position:relative;transform:scale(.77);flex:1}.turn-piece-container+.turn-piece-container{margin-left:.5em}@media (min-width: 400px){.turn-piece-container+.turn-piece-container{margin-left:.2em}}@media (min-width: 768px){.turn-piece-container+.turn-piece-container{margin-left:0}}@media (min-width: 992px){.turn-piece-container{transform:scale(.64)}}.turn-piece-container .current-w,.turn-piece-container .current-b{position:relative}.turn-piece-container .piece.w.current-w:after,.turn-piece-container .piece.b.current-b:after{content:"";display:block;position:absolute;top:50%;left:50%;width:160%;height:160%;transform:translateY(-50%) translate(-50%);border:1px solid var(--surround-border)}@media (min-width: 400px){.turn-piece-container .piece.w.current-w:after,.turn-piece-container .piece.b.current-b:after{width:180%;height:180%}}.reset{text-transform:uppercase;font-size:.75em;letter-spacing:.08em;opacity:0}@media (min-width: 400px){.reset{font-size:.77em}}@media (min-width: 768px){.reset{font-size:.8em}}.end .reset{cursor:pointer;opacity:.8}.feedback{text-align:center;min-height:60px;font-style:italic;font-size:.75em;padding-top:1em;cursor:default;opacity:.8}@media (min-width: 400px){.feedback{font-size:.8em}}@media (min-width: 768px){.feedback{font-size:.85em}}.theme-control{position:fixed;top:0;right:0;padding:1em;z-index:3}.theme-toggle{display:block;width:1.5em;height:1.5em;margin:0;padding:0;background:none;border:none;color:inherit;cursor:pointer;opacity:.35;transition:opacity .2s ease-in-out}.theme-toggle:hover,.theme-toggle:focus-visible{background:none;opacity:.9}.theme-toggle:after{width:var(--theme-point-diameter);height:var(--theme-point-diameter);background:transparent;border:1px solid currentColor;box-shadow:none}.theme-toggle[data-theme-choice=light]:after{background:currentColor}.theme-toggle[data-theme-choice=system]:after{background:linear-gradient(90deg,currentColor 0 50%,transparent 50%)}@media (min-width: 992px){.theme-toggle:after{width:var(--theme-point-diameter-large);height:var(--theme-point-diameter-large)}}.theme-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:50%}.fade-in-1{transition:opacity 2.6s ease-in-out;opacity:0}.fade-in-2{transition:opacity 2.6s ease-in-out 1.2s;opacity:0}.has-initially-loaded,.has-initially-loaded .fade-in-1,.has-initially-loaded .fade-in-2{opacity:1}