@import"https://fonts.googleapis.com/css2?family=Days+One&family=Quicksand:wght@300..700&display=swap"layer(base);@layer properties,base,theme,layout,components,utilities;/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-neutral-100:oklch(97% 0 0);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-neutral-800:oklch(26.9% 0 0);--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}:root{--ff-quicksand:"Quicksand",sans-serif;--ff-daysone:"Days One",sans-serif;--ff-body:var(--ff-quicksand);--ff-heading:var(--ff-daysone);--fs-0:.875rem;--fs-1:1rem;--fs-2:1.125rem;--fs-3:1.25rem;--fs-4:1.5rem;--fs-5:2rem;--fs-6:3rem;--color-primary-50:#ffc4cb;--color-primary-100:#ffa0ac;--color-primary-150:#ff8392;--color-primary-200:#f46274;--color-primary-400:#e44157;--color-primary-500:#c1283c;--color-primary-700:#861f2b;--color-primary-800:#37050b;--color-primary-shadow-800:#37050b4d;--color-neutral-0:#fff;--color-neutral-100:#ccd1d6;--color-neutral-200:#b3b7bb;--color-neutral-400:#868a8d;--color-neutral-700:#3d3f44;--color-neutral-800:#27292d;--color-neutral-850:#22252a;--color-text-default:var(--color-neutral-200);--color-text-interactive:var(--color-primary-100)}.type-page-title{font-family:var(--ff-heading);font-size:var(--fs-4);color:var(--color-primary-200)}@media screen and (min-width:600px){.type-page-title{font-size:var(--fs-5)}}.type-interface{font-family:var(--ff-body);font-size:var(--fs-0);text-transform:uppercase;text-align:center;font-weight:600}@media screen and (min-width:600px){.type-interface{font-size:var(--fs-1)}}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}body{background:var(--color-neutral-850)url(/archive/tic-tac-toe/assets/what-the-hex-dark-BT74srO9.png) center repeat;color:var(--color-text-default);font-family:var(--ff-body);font-size:var(--fs-1);line-height:1.6}@media screen and (min-width:600px){body{font-size:var(--fs-2)}}h1,h2,h3,h4,h5,h6{line-height:1.3}}@layer components{.card{background:var(--color-neutral-700);border-radius:.5rem;padding:1rem;position:relative;box-shadow:0 2px 6px #0003,0 2px 2px #0000001a,0 0 2px #0003}.card__separator-top{border-top:1px solid #555861}.card__separator-bottom{border-bottom:1px solid var(--color-neutral-800)}.button{cursor:pointer;text-align:center;border-radius:.25rem;padding:.25rem .75rem;font-weight:600;transition:color .1s ease-in-out,background-color .1s ease-in-out}.button:focus,.button:focus-visible{outline:2px solid #fff}.button.button--primary{font-size:var(--fs-1);color:var(--color-neutral-0);text-shadow:1px 1px 0 var(--color-primary-shadow-800),-1px -1px 0 var(--color-primary-shadow-800),1px -1px 0 var(--color-primary-shadow-800),-1px 1px 0 var(--color-primary-shadow-800);background:linear-gradient(var(--color-primary-100)0%,var(--color-primary-200)6%,var(--color-primary-400)94%,var(--color-primary-700)100%);padding-bottom:.375rem}@media (pointer:fine){.button.button--primary{transition:transform 80ms ease-in-out}}.button.button--disabled{text-shadow:none}@media (pointer:fine){.button.button--primary:not(.button--disabled):hover{transform:scale(1.1)}}.button.button--secondary{font-size:var(--fs-0);color:var(--color-primary-800);background:var(--color-primary-200)}.button.button--full{width:100%}.button.button--disabled{cursor:default;color:var(--color-neutral-700);background:var(--color-neutral-100)}.board{grid-template-rows:repeat(3,82px);grid-template-columns:repeat(3,82px);display:grid}:root{--square-rounded:.25rem;--square-border:1px solid var(--color-neutral-200)}.square{font-family:var(--ff-daysone);font-size:var(--fs-6);border:1px solid #0000;justify-content:center;align-items:center;line-height:1;display:flex;position:relative}.square:focus,.square:focus-visible{outline:2px solid var(--color-primary-400);outline-offset:-2px}.square.square--default{color:var(--color-neutral-800);background-color:var(--color-neutral-0);transition:color .1s ease-in .125s,background-color .1s ease-in .125s}.square.square--winning{color:var(--color-neutral-0);background-color:var(--color-neutral-850);transition:color .1s ease-out,background-color .1s ease-out}.square:first-child{border-top-left-radius:var(--square-rounded)}.square:nth-child(3){border-top-right-radius:var(--square-rounded)}.square:nth-child(7){border-bottom-left-radius:var(--square-rounded)}.square:last-child{border-bottom-right-radius:var(--square-rounded)}.square:not(:nth-child(3n)){border-right:var(--square-border)}.square:nth-child(-n+6){border-bottom:var(--square-border)}.square .square__value{transition:transform .1s ease-in;transform:scale(1)}.square--winning :is(.square .square__value){transition:transform .1s ease-out .125s;transform:scale(1.2)}}@layer utilities{.mb-4{margin-bottom:calc(var(--spacing)*4)}.flex{display:flex}.grid{display:grid}.max-w-60{max-width:calc(var(--spacing)*60)}.max-w-\[300px\]{max-width:300px}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.gap-10{gap:calc(var(--spacing)*10)}.bg-\(--color-neutral-800\){background-color:var(--color-neutral-800)}.p-10{padding:calc(var(--spacing)*10)}.pb-1{padding-bottom:calc(var(--spacing)*1)}.pb-14{padding-bottom:calc(var(--spacing)*14)}.pb-16{padding-bottom:calc(var(--spacing)*16)}.text-center{text-align:center}.status-card{height:62px;transition:height .15s ease-in-out,background .15s ease-in-out}.status-card.winner,.status-card.tie{height:90px}.status-card:before{content:"";background:var(--color-primary-100)repeating-conic-gradient(var(--color-primary-50)0%,var(--color-primary-100)15%,var(--color-primary-50)33%);opacity:0;width:150%;height:600%;transition:opacity .15s ease-in-out;position:absolute}.status-card.winner:before{opacity:1;animation:6s linear infinite spin}.status-card.tie{background:var(--color-primary-700)}.status-card .text{z-index:1;text-align:center;color:var(--color-neutral-0);transition:color 50ms ease-in-out;position:relative}.winner :is(.status-card .text){color:var(--color-primary-800)}.link{color:var(--color-text-interactive);text-decoration:underline}.link:focus,.link:active{outline:2px solid #fff}@keyframes wiggle{0%{transform:rotate(-5deg)}to{transform:rotate(5deg)}}@keyframes spin{0%{transform-origin:50%;transform:rotate(0)}to{transform-origin:50%;transform:rotate(360deg)}}}@layer layout{.page-layout{flex-direction:column;width:100%;min-height:100vh;display:flex}.game-layout{gap:.75rem;display:grid}@media (min-width:600px){.game-layout{grid-template-rows:repeat(3,auto) 1fr;grid-template-columns:180px 1fr}}@media (min-width:780px){.game-layout{grid-template-rows:auto 1fr auto;grid-template-columns:180px 278px 180px;grid-auto-flow:column}}.controls-layout{grid-template-rows:auto 1fr auto;display:grid}@media (min-width:600px){.controls-layout{grid-row:span 3}}.moves-layout{justify-content:center;align-items:center;gap:.5rem;padding-bottom:1rem;display:flex}@media (min-width:600px){.moves-layout{flex-direction:column;justify-content:flex-start}}.new-game-layout{justify-content:center;padding-top:1rem;display:flex}@media (min-width:600px){.new-game-layout{padding-top:2rem;padding-bottom:1rem}}.status-layout{justify-content:center;align-items:center;display:flex;overflow:hidden}@media (min-width:600px){.status-layout{grid-column-start:2}}@media (min-width:780px){.status-layout{grid-row-start:1}}.board-layout{justify-content:center;display:flex}@media (min-width:600px){.board-layout{grid-column-start:2}}@media (min-width:780px){.board-layout{grid-row-start:2}}@media (min-width:600px){.timer-layout{grid-column-start:2}}@media (min-width:780px){.timer-layout{grid-row-start:3}}.history-layout{flex-direction:column;align-items:center;display:flex}@media (min-width:600px){.history-layout{grid-column:span 2}}@media (min-width:780px){.history-layout{grid-row:span 3}}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial}}}