:root{color-scheme:light dark;--fg: rgb(70 70 70);--fg-70: rgb(70 70 70 / .7);--fg-60: rgb(70 70 70 / .6);--fg-22: rgb(70 70 70 / .22);--bg: rgb(240 240 240);--accent-blue: rgb(141 201 246);--accent-green: rgb(190 246 181);--accent-red: rgb(240 167 211);--accent-purple: rgb(158 149 253);--accent-purple-22: rgb(158 149 253 / .22);--link-blue: #007aff;--glass-blur: 24px;--glass-tint: rgb(255 255 255 / .68);--glass-tint-hover: rgb(255 255 255 / .745);--glass-tint-pressed: rgb(255 255 255 / .81);--glass-rim: rgb(255 255 255 / .45);--glass-shadow: 0 4px 28px rgb(0 0 0 / .12);--material-blur: 22px;--material-tint: rgb(255 255 255 / .35);--material-darken: rgb(0 0 0 / .08);--banner-plate-tint: rgb(194 194 194 / .5);--fg-on-dark-70: rgb(240 240 240 / .7);--fg-on-dark-60: rgb(240 240 240 / .6);--fg-on-light-70: rgb(70 70 70 / .7);--fg-on-light-60: rgb(70 70 70 / .6);--shadow-color: rgb(0 0 0 / .33);--shadow-loader-square: 0 0 4px var(--shadow-color);--shadow-banner-plate: 0 10px 28px var(--shadow-color);--shadow-grid-preview: 0 .5px 2px var(--shadow-color);--prepaint-rainbow: linear-gradient(180deg, #fd9ca5 0%, #fbc577 20%, #fefc96 40%, #aaf9a8 60%, #9bc3fd 80%, #d99dfd 100%);--vignette: radial-gradient(circle at center, rgb(0 0 0 / 0) 10px, rgb(0 0 0 / .1) 455px, rgb(0 0 0 / .18) 900px);--space-button-bottom: 30px;--space-footer-bottom: 40px;--space-above-footer: 24px;--space-selector-above-row: 14px;--space-grid-options: 12px;--space-timer-above-pause: 10px;--space-solved-row-side: 28px;--space-content-top: 140px;--space-content-top-short: 24px;--space-error-stack: 40px;--space-error-side: 60px;--space-category-stack: 20px;--radius-capsule: 999px;--radius-grid-selector: 16px;--radius-timer: 14px;--radius-small-pill: 10px;--radius-banner: 22px;--radius-banner-compact: 18px;--radius-grid-option: 2px;--z-swirl: -1;--z-confetti: 1;--z-board: 2;--z-controls: 3;--z-overlay: 4;--z-overlay-controls: 5;--z-banner: 6;--z-loader: 8;--safe-top: max(env(safe-area-inset-top, 0px), var(--debug-safe-top, 0px));--safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--debug-safe-bottom, 0px));--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}@media(prefers-color-scheme:dark){:root{--fg: rgb(240 240 240 / .85);--fg-70: rgb(240 240 240 / .6);--fg-60: rgb(240 240 240 / .51);--fg-22: rgb(240 240 240 / .19);--bg: rgb(70 70 70 / .85);--link-blue: #0a84ff;--glass-tint: rgb(0 0 0 / .42);--glass-tint-hover: rgb(0 0 0 / .36);--glass-tint-pressed: rgb(0 0 0 / .3);--glass-rim: rgb(255 255 255 / .18);--glass-shadow: 0 4px 28px rgb(0 0 0 / .3);--material-tint: rgb(62 62 62 / .5);--material-darken: rgb(0 0 0 / .18);--banner-plate-tint: rgb(62 62 62 / .5);--prepaint-rainbow: linear-gradient(180deg, #985d63 0%, #977647 20%, #98975a 40%, #669565 60%, #5d7598 80%, #825e98 100%)}}@font-face{font-family:Nunito;src:url(/fonts/nunito_variable.ttf) format("truetype");font-weight:200 1000;font-style:normal;font-display:swap}:root{--font-sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-rounded: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;--rounded-line: 1.19;--rounded-icon: 36px;--rounded-large: 24px;--rounded-small: 14px;--rounded-banner: 64px;--rounded-banner-compact: 54px}.ios-largeTitle{font:400 34px / 41px var(--font-sans);letter-spacing:.37px}.ios-title{font:400 28px / 34px var(--font-sans);letter-spacing:.36px}.ios-title2{font:400 22px / 28px var(--font-sans);letter-spacing:.35px}.ios-title3{font:400 20px / 25px var(--font-sans);letter-spacing:.38px}.ios-headline{font:600 17px / 22px var(--font-sans);letter-spacing:-.43px}.ios-body{font:400 17px / 22px var(--font-sans);letter-spacing:-.43px}.ios-callout{font:400 16px / 21px var(--font-sans);letter-spacing:-.31px}.ios-subheadline{font:400 15px / 20px var(--font-sans);letter-spacing:-.23px}.ios-footnote{font:400 13px / 18px var(--font-sans);letter-spacing:-.08px}.ios-caption{font:400 12px / 16px var(--font-sans);letter-spacing:0}.ios-rounded{font-family:var(--font-rounded);line-height:var(--rounded-line)}.ios-rounded-icon{font:400 var(--rounded-icon) / var(--rounded-line) var(--font-rounded)}.ios-rounded-large{font:400 var(--rounded-large) / var(--rounded-line) var(--font-rounded)}.ios-rounded-small{font:400 var(--rounded-small) / var(--rounded-line) var(--font-rounded)}.ios-rounded-banner{font:900 var(--rounded-banner) / var(--rounded-line) var(--font-rounded)}.ios-tabular{font-variant-numeric:tabular-nums}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.glass{--glass-scale: 1;appearance:none;-webkit-appearance:none;border:0;margin:0;padding:0;font:inherit;color:var(--fg);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;text-decoration:none;background-color:var(--glass-tint);box-shadow:inset 0 0 0 .5px var(--glass-rim),var(--glass-shadow);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transform:scale(1);transition:transform var(--spring-glassPressOut-duration) var(--spring-glassPressOut-easing),background-color var(--spring-glassPressOut-duration) var(--spring-glassPressOut-easing)}.glass__content{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--glass-scale) * 6px);transition:opacity var(--spring-glassPressOut-duration) var(--spring-glassPressOut-easing)}.glass[data-pressed]{transform:scale(1.17);background-color:var(--glass-tint-pressed);transition:transform var(--spring-glassPressIn-duration) var(--spring-glassPressIn-easing),background-color var(--spring-glassPressIn-duration) var(--spring-glassPressIn-easing)}.glass[data-pressed] .glass__content{opacity:.3;transition:opacity var(--spring-glassPressIn-duration) var(--spring-glassPressIn-easing)}@media(hover:hover)and (pointer:fine){.glass:hover:not(:disabled):not([data-pressed]):not(.glass--label){background-color:var(--glass-tint-hover)}}.glass:focus-visible{outline:2px solid var(--link-blue);outline-offset:3px}.glass:disabled,.glass[aria-disabled=true]{color:var(--fg-60);cursor:default}.glass--icon{font:400 calc(var(--glass-scale) * var(--rounded-icon)) / var(--rounded-line) var(--font-rounded);padding:calc(var(--glass-scale) * 20px) calc(var(--glass-scale) * 30px);min-height:calc(var(--glass-scale) * 56px);border-radius:var(--radius-capsule)}.glass__icon-frame{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--glass-scale) * 40px);height:calc(var(--glass-scale) * 40px)}.glass--largeText{font:400 calc(var(--glass-scale) * var(--rounded-large)) / var(--rounded-line) var(--font-rounded);padding:calc(var(--glass-scale) * 10px) calc(var(--glass-scale) * 24px);min-height:calc(var(--glass-scale) * 36px);border-radius:var(--radius-capsule)}.glass--smallText{font:400 calc(var(--glass-scale) * var(--rounded-small)) / var(--rounded-line) var(--font-rounded);padding:calc(var(--glass-scale) * 4px) calc(var(--glass-scale) * 12px);min-height:calc(var(--glass-scale) * 20px);border-radius:calc(var(--glass-scale) * var(--radius-small-pill))}.glass--label{cursor:default;border-radius:var(--radius-timer)}.material-overlay,.material-overlay__darken{position:fixed;inset:0;z-index:var(--z-overlay);pointer-events:none}.material-overlay{background-color:var(--material-tint);-webkit-backdrop-filter:blur(var(--material-blur));backdrop-filter:blur(var(--material-blur))}.material-overlay__darken{background-color:var(--material-darken);mix-blend-mode:soft-light}.material-overlay[data-interactive]{pointer-events:auto}.material-overlay--loader{z-index:var(--z-loader)}.layer-board{position:relative;z-index:var(--z-board)}.layer-controls{position:relative;z-index:var(--z-controls)}.layer-overlay-controls{position:relative;z-index:var(--z-overlay-controls)}.layer-banner{position:relative;z-index:var(--z-banner)}:root{font-family:var(--font-sans);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{min-width:320px;color:var(--fg);background:var(--prepaint-rainbow)}.puzzle-swirl-background{position:fixed;inset:0;z-index:var(--z-swirl);pointer-events:none;display:block;width:100%;height:100%;transform:scale(1.03);opacity:.98}.puzzle-swirl-vignette{position:fixed;inset:0;z-index:var(--z-swirl);pointer-events:none;background:var(--vignette);mix-blend-mode:soft-light}.puzzle-stage{position:relative;z-index:1}.library-page,.library-puzzle-wrapper{position:relative;min-height:100vh}.site-footer{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 20px;padding:16px 16px max(16px,env(safe-area-inset-bottom,16px));font:400 12px / 16px var(--font-sans);position:relative;z-index:1}.site-footer a{color:var(--fg-60);text-decoration:none;white-space:nowrap}.site-footer a:hover,.site-footer a:focus-visible{color:var(--link-blue);text-decoration:underline}.crossfade{display:grid}.crossfade>.crossfade__layer{grid-area:1 / 1;min-width:0}.crossfade--bottom>.crossfade__layer{align-self:end}.crossfade--center>.crossfade__layer{align-self:center}.crossfade--screen{grid-template-rows:minmax(0,1fr)}.crossfade--screen>.crossfade__layer{align-self:stretch;min-height:0}.crossfade--fill{grid-template-rows:minmax(0,1fr)}.crossfade--fill>.crossfade__layer{align-self:stretch}.crossfade__layer[inert]{pointer-events:none}.solved-banner{position:relative;display:inline-grid;max-width:520px;padding:20px;pointer-events:none}.solved-banner__plate{position:absolute;inset:0;border-radius:var(--banner-radius);border:1px solid var(--fg-22);background-color:var(--banner-plate-tint);-webkit-backdrop-filter:blur(var(--material-blur));backdrop-filter:blur(var(--material-blur));box-shadow:var(--shadow-banner-plate)}.solved-banner__word{position:relative;display:grid;isolation:isolate;font:900 var(--banner-font-size) / var(--rounded-line) var(--font-rounded);white-space:nowrap}.solved-banner__word>span{grid-area:1 / 1}.solved-banner__fill{background-image:var(--banner-fill);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 3px rgb(0 0 0 / var(--banner-lift-alpha)))}.solved-banner__frost{background-image:linear-gradient(var(--banner-diagonal),rgb(255 255 255 / var(--banner-frost-alpha)),rgb(255 255 255 / calc(var(--banner-frost-alpha) * .35)),rgb(255 255 255 / 0));-webkit-background-clip:text;background-clip:text;color:transparent;mix-blend-mode:screen}.solved-banner__overlay{color:rgb(255 255 255 / var(--banner-overlay-alpha));mix-blend-mode:overlay}.solved-banner__edge{color:rgb(255 255 255 / var(--banner-edge-alpha));mix-blend-mode:overlay;-webkit-mask:linear-gradient(black,black) top / 100% 2.5px no-repeat,linear-gradient(black,black) bottom / 100% 2.5px no-repeat,linear-gradient(black,black) left / 2.5px 100% no-repeat,linear-gradient(black,black) right / 2.5px 100% no-repeat;mask:linear-gradient(black,black) top / 100% 2.5px no-repeat,linear-gradient(black,black) bottom / 100% 2.5px no-repeat,linear-gradient(black,black) left / 2.5px 100% no-repeat,linear-gradient(black,black) right / 2.5px 100% no-repeat}.solved-banner__shimmer{background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;mix-blend-mode:screen}.grid-selector{position:relative;display:flex;justify-content:center;align-items:center}.grid-selector__bar{position:absolute;top:0;left:50%;translate:-50% 0;border-radius:calc(var(--glass-scale) * var(--radius-grid-selector));pointer-events:none}.grid-selector__option{position:absolute;top:0;left:50%;appearance:none;border:0;margin:0;padding:0;background:none;color:var(--fg);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.grid-selector__option:disabled{cursor:default}.grid-selector__option:focus-visible{outline:2px solid var(--link-blue);outline-offset:-4px;border-radius:calc(var(--glass-scale) * var(--radius-grid-selector))}.grid-selector__emphasis{display:flex}.grid-selector__label{display:flex;border-radius:calc(var(--glass-scale) * var(--radius-grid-option));opacity:.8}.grid-selector__label.is-selected{opacity:1;background-color:var(--accent-purple-22);outline:calc(var(--glass-scale) * 4px) solid var(--accent-purple);outline-offset:calc(var(--glass-scale) * -2px)}.grid-selector__preview{display:block;color:var(--fg);opacity:.9;filter:drop-shadow(var(--shadow-grid-preview))}.play-surface{position:absolute;top:0;left:0;overflow:hidden}.play-board{position:absolute;touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none}.play-band{position:absolute;display:flex;flex-direction:column;align-items:center;pointer-events:none}.play-band>*{pointer-events:auto}.play-band--below{padding-bottom:var(--space-footer-bottom)}.play-band--beside>.crossfade{width:100%;height:100%}.play-band--beside .crossfade__layer{display:flex;flex-direction:column;align-items:center;min-height:0}.play-band--beside .play-band__controls{flex:1 0 auto;justify-content:center;padding-block:var(--space-button-bottom)}.play-band--below>.crossfade{width:100%}.play-band__controls{display:flex;flex-direction:column;align-items:center;width:100%}.play-band--below .play-band__footer{margin-top:var(--space-above-footer);width:100%}.play-band--beside .play-band__footer{flex:0 1 auto;min-height:0;overflow-y:auto;width:100%;box-sizing:border-box;padding:0 12px var(--space-footer-bottom)}.play-row{display:flex;align-items:center;justify-content:space-evenly;width:100%}.play-solved-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 28px;box-sizing:border-box}.play-row-banner{display:flex;justify-content:center;margin-bottom:12px}.play-row-report{margin-top:10px}.play-column-banner{position:relative;align-self:stretch}.play-column-banner__banner{position:absolute;top:0;left:50%;transform-origin:top center}.play-column{display:flex;flex-direction:column;align-items:center;gap:16px}.play-band[data-tone=light]{--fg-70: var(--fg-on-dark-70);--fg-60: var(--fg-on-dark-60)}.play-band[data-tone=dark]{--fg-70: var(--fg-on-light-70);--fg-60: var(--fg-on-light-60)}.play-footer{display:flex;flex-direction:column;align-items:center;gap:8px}.play-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px;color:var(--fg-60)}.play-footer-links a{color:inherit;text-decoration:none}@media(hover:hover)and (pointer:fine){.play-footer-links a:hover{color:var(--link-blue)}}.play-footer-link{display:inline-flex;gap:6px}body:has(.puzzle-stage) .site-footer{display:none}.play-top{position:absolute;display:flex;flex-direction:column;justify-content:center;padding:12px 16px;pointer-events:none}.play-top>*{pointer-events:auto}.play-funnel{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.play-funnel__line{margin:0;max-width:34em;color:var(--fg-70)}.play-funnel__line a{color:inherit}.play-confetti{position:absolute;inset:0;width:100%;height:100%;z-index:var(--z-confetti);pointer-events:none}.piece{position:absolute;cursor:grab;top:0;left:0;background-repeat:no-repeat;will-change:transform;touch-action:none}.play-board__photo{position:absolute;inset:0;background-size:cover;background-position:center}.play-band__group{display:flex;flex-direction:column;align-items:center;width:100%}.play-banner{position:absolute;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:center;padding:0 12px;pointer-events:none}.play-credit{position:absolute;right:10px;bottom:8px;z-index:10}.play-credit a{display:block;padding:6px 10px;color:var(--accent-blue);text-decoration:none}.play-timer{padding:8px}.play-timer>span{display:inline-block;text-align:center;white-space:nowrap}.piece[data-dragging]{cursor:grabbing}.pause-layer{position:absolute;inset:0;z-index:var(--z-overlay-controls);pointer-events:none}.pause-overlay{display:flex;flex-direction:column;align-items:center;height:100%;box-sizing:border-box;padding-bottom:var(--space-footer-bottom)}.pause-overlay__upper{flex:1;display:flex;align-items:center;justify-content:center;width:100%}.pause-overlay__upper .glass,.pause-overlay__row>.glass,.pause-overlay__footer{pointer-events:auto}.pause-overlay__row{position:relative}.pause-overlay__row>.pause-overlay__ghost{position:absolute;pointer-events:none}.pause-overlay__footer{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;margin-top:var(--space-above-footer)}.demo-control{position:absolute;left:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}.demo-control__note{margin:0;color:var(--fg-70)}.report-pill__label{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--glass-scale) * 6px);white-space:nowrap}.loading-view{position:fixed;inset:0;z-index:var(--z-loader);pointer-events:none}.loading-view__content{position:relative;width:100%;height:100%}.loading-view__message{position:absolute;left:0;right:0;margin:0;text-align:center;color:var(--fg)}.loading-view__square{position:absolute;box-shadow:var(--shadow-loader-square)}.error-view{position:fixed;inset:0;z-index:var(--z-overlay-controls)}.error-view__scroll{display:flex;flex-direction:column;height:100%;overflow-y:auto;box-sizing:border-box;padding:var(--safe-top) var(--safe-right, 0px) 0 var(--safe-left, 0px)}.error-view__column{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;padding:40px 0}.error-view__title,.error-view__message{margin:0;color:var(--accent-red);text-align:center}.error-view__message{padding:0 60px}.error-view__actions{display:flex;flex-direction:column;align-items:center;gap:16px}.error-view__buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.error-view__footer{padding:0 16px calc(var(--space-footer-bottom) + var(--safe-bottom));display:flex;justify-content:center}body:has(.error-view) .site-footer{display:none}.report-control{display:flex;flex-direction:column;align-items:center;gap:8px}.report-fallback{margin:0;color:var(--fg-60);-webkit-user-select:text;user-select:text}.library-crossfade{position:fixed;inset:0}.library-screen{display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:var(--safe-top) var(--safe-right) 0 var(--safe-left)}.library-screen__scroll{flex:1;min-height:0;overflow-y:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0,black 3%,black min(97%,calc(100% - 32px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black 3%,black min(97%,calc(100% - 32px)),transparent 100%)}.library-screen__foot{display:flex;flex-direction:column;align-items:center;padding:16px 16px calc(var(--space-footer-bottom) + var(--safe-bottom))}.library-screen__footer{margin-top:var(--space-above-footer)}.library-categories{display:flex;flex-direction:column;align-items:center;padding:24px 16px}.library-categories:before{content:"";flex:0 1 116px}.library-categories__list{flex:none;display:flex;flex-direction:column;align-items:center;gap:20px}.library-thumbnails{padding:20px 10px 16px}.library-thumbnails__grid{display:grid;gap:8px}.library-thumbnails__cell{aspect-ratio:1;padding:0;border:0;border-radius:10%;overflow:hidden;background:none;cursor:pointer}.library-thumbnails__cell:disabled{cursor:default}.library-thumbnails__cell img{display:block;width:100%;height:100%;object-fit:contain}.library-thumbnails__error{margin:0;text-align:center;color:var(--fg-70)}body:has(.library-page) .site-footer{display:none}
