*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}:root{font-family:Inter,sans-serif;font-feature-settings:"liga"1,"calt"1;--color-neutral-100:oklch(97% 0 0);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-300:oklch(87% 0 0);--color-neutral-400:oklch(70.8% 0 0);--color-neutral-500:oklch(55.6% 0 0);--color-neutral-600:oklch(43.9% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-neutral-950:oklch(14.5% 0 0);--color-black:#000;--color-white:#fff;--color-blue:#0000ff;--color-primary-100:#f9f6f4;--color-primary-300:#edebeb;--color-primary-500:#100d0d;--spacing:.25rem;--padding:calc(var(--spacing) * 6);--bg-color:var(--color-neutral-950);--text-color:#ffffff;--bg-grid-color:#374151;--grid-lines-color:#ffffff1a;--text-neutral:var(--color-neutral-400);--icon-toggle-color:var(--color-neutral-100)}@supports (font-variation-settings:normal){:root{font-family:InterVariable,sans-serif}}[data-theme=light]{--bg-color:#fff;--text-color:var(--color-primary-500);--bg-grid-color:#e5e7eb;--grid-lines-color:var(--color-blue);--text-neutral:var(--color-neutral-700);--icon-toggle-color:var(--color-neutral-950)}@media (min-width:40rem){:root{--padding:calc(var(--spacing) * 10)}}::selection{color:var(--color-primary-100);background-color:var(--color-blue)}body{background-color:var(--bg-color);color:var(--text-color);transition:.3s ease}.grid{display:grid;min-height:100dvh;grid-template-columns:var(--padding) 1px 1fr 1px var(--padding);grid-template-rows:var(--padding) 1px 1fr 1px var(--padding);overflow-x:hidden}.grid>:nth-child(-n+4){background-color:var(--grid-lines-color)}.cell-01{grid-row-start:2;grid-column-start:1;grid-column:1/span 5}.cell-02{grid-row-start:4;grid-column-start:1;grid-column:1/span 5}.cell-03{grid-row-start:1;grid-column-start:2;grid-row:1/span 5}.cell-04{grid-row-start:1;grid-column-start:4;grid-row:1/span 5}.cell-05{grid-column-start:3;grid-row-start:3;padding:var(--padding)}.content{display:flex;flex-direction:column;justify-content:space-between;height:100%;position:relative}h1{font-size:min(12vw,7.5rem);font-weight:450;letter-spacing:-.05rem;line-height:1;margin:1rem 0;text-wrap:balance;max-width:20ch}p{color:var(--text-neutral);font-size:min(4vw,1.25rem);font-weight:300}.logo{font-size:1.5rem;font-weight:200;letter-spacing:.05rem;display:inline-flex;gap:.75rem;align-items:center;align-self:flex-start;cursor:pointer}.logo:hover .cube:after{transform:scale(1.5);background-color:var(--color-blue);opacity:1}.logo:hover .cube:before{transform:scale(2);opacity:0}.logo:hover .cube .cube-inner{transform:scale(.5);background-color:var(--color-white)}.cube{--size:1rem;display:inline-block;width:var(--size);height:var(--size);transform:translateY(1px);position:relative}.cube:before,.cube:after{content:"";position:absolute;inset:0;background-color:var(--color-blue);border:1.5px solid var(--color-blue);transition:all .6s cubic-bezier(.22,1,.36,1)}.cube:after{border-color:#00f}.cube .cube-inner{position:absolute;inset:0;background-color:var(--color-blue);transition:all .7s cubic-bezier(.22,1,.36,1);z-index:2}@media (min-width:40rem){.logo{font-size:2rem}.cube{--size:1.25rem;transform:translateY(2px)}}.theme-toggle{cursor:pointer;grid-column-start:5;grid-row-start:5;background:0 0}.theme-toggle .icon{transition:transform .2s ease-in-out}.theme-toggle .icon circle{stroke:var(--icon-toggle-color)}.theme-toggle .icon path{fill:var(--icon-toggle-color)}.theme-toggle.rotate .icon{transform:rotate(180deg);transition:transform .2s linear}.live-time{grid-column-start:1;grid-row-start:3;display:flex;justify-content:center;padding:1rem 0}.timestamp{font-size:.5rem;font-weight:200;transform:rotate(180deg);writing-mode:vertical-rl;text-orientation:mixed}@media (min-width:40rem){.timestamp{font-size:.625rem}}[class^=square]{border:1px solid var(--grid-lines-color);background-color:var(--bg-color);height:calc(var(--spacing)*1.75);width:calc(var(--spacing)*1.75);position:relative;transition:.3s ease}.square-01{grid-row-start:1;grid-column-start:1;place-self:end;right:calc(var(--spacing)*-1);bottom:calc(var(--spacing)*-1)}.square-02{grid-row-start:1;grid-column-start:5;justify-self:flex-start;align-self:flex-end;left:calc(var(--spacing)*-1);bottom:calc(var(--spacing)*-1)}.square-03{grid-row-start:5;grid-column-start:1;justify-self:flex-end;align-self:flex-start;right:calc(var(--spacing)*-1);top:calc(var(--spacing)*-1)}.square-04{grid-row-start:5;grid-column-start:5;place-self:start;left:calc(var(--spacing)*-1);top:calc(var(--spacing)*-1)}