:root{font-family:Arial,Helvetica,sans-serif;color:#171714;background:#f5f3ec;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus,a:focus,select:focus{outline:none}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid currentColor;outline-offset:3px}.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:white;padding:1rem}header{height:70px;padding:0 clamp(18px,4vw,64px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d8d6ce;background:#f5f3ecee;position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.brand{font-weight:700;letter-spacing:-.07em;font-size:1.2rem;white-space:nowrap}.brand span{display:inline-block;transition:transform .3s}.brand:hover span{transform:rotate(90deg)}nav{display:flex;gap:clamp(12px,2vw,34px)}nav a,.eyebrow,.section-label,.tiny,.hero-bottom,.art-note,.book-meta>div>span,.interlude>span{font-size:.66rem;font-weight:700;letter-spacing:.14em}nav a:hover,.text-link:hover{opacity:.5}.hero{min-height:calc(100svh - 70px);padding:34px clamp(18px,4vw,64px) 23px;display:flex;flex-direction:column;justify-content:space-between}.hero-inner{display:grid;grid-template-columns:1.35fr .65fr;align-items:center;gap:4vw}.hero h1{font-size:clamp(5rem,13vw,14rem);line-height:.8;letter-spacing:-.095em;margin:0 0 25px;font-weight:700}.hero h1 span:first-child{font-size:.75em}.period{color:#df4c31}.hero p{font-size:clamp(1.1rem,2vw,1.8rem);margin:0}.hero-actions{display:flex;align-items:center;gap:34px;margin-top:45px}.button{border:1px solid #171714;padding:17px 21px;display:inline-flex;gap:35px;align-items:center;justify-content:space-between;font-weight:700;font-size:.75rem;letter-spacing:.08em;min-height:52px}.button b{font-size:1.1rem}.dark{background:#171714;color:#f5f3ec}.dark:hover{background:#e74d32;border-color:#e74d32}.light{background:#f5f3ec;color:#171714}.light:hover{background:#e74d32;color:white;border-color:#e74d32}.text-link{border:0;background:transparent;padding:10px 0;font-weight:700;font-size:.72rem;letter-spacing:.1em}.hero-art{text-align:center}.grid-art{position:relative;display:grid;place-items:center;aspect-ratio:1}.grid-art img{image-rendering:pixelated;width:100%;height:100%;object-fit:contain}.hero-art .grid-art{width:min(29vw,360px);margin:auto}.grid-art.show-grid:after{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent calc(20% - 1px),#5556 calc(20% - 1px),#5556 20%,transparent 20%),linear-gradient(to bottom,transparent calc(20% - 1px),#5556 calc(20% - 1px),#5556 20%,transparent 20%);background-size:20% 20%;pointer-events:none}.art-note{display:block;margin-top:22px}.hero-bottom{display:flex;justify-content:space-between}.section{padding:clamp(70px,9vw,140px) clamp(18px,4vw,64px)}.section-label{border-top:1px solid #aaa99f;padding-top:12px;margin-bottom:55px}.section h2,.random-section h2{font-size:clamp(3.6rem,8vw,9rem);line-height:.85;letter-spacing:-.085em;margin:0;font-weight:700}.section h2 em,.random-section h2 em{font-style:normal;color:#df4c31}.rule{background:#e9e7df}.rule-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center}.rule-layout>div{justify-self:center}.rule-art{width:min(34vw,400px)}.segmented{display:flex;justify-content:center;margin-top:25px;gap:5px}.segmented button,.filters button{border:1px solid #aaa99f;background:transparent;padding:9px 17px;font-size:.7rem;font-weight:700;letter-spacing:.07em}.segmented button.active,.filters button.active{background:#171714;color:#fff;border-color:#171714}.equation{font-size:clamp(1.5rem,3vw,3rem);font-weight:700;letter-spacing:-.06em;margin:80px 0 0;border-top:1px solid #aaa99f;padding-top:12px}.equation span{color:#df4c31}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:60px}.section-heading p{max-width:230px;font-size:.95rem;line-height:1.5}.gallery-list{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#d8d6ce;border:1px solid #d8d6ce}.gallery-item{background:#f5f3ec;border:0;padding:20px;text-align:left;min-height:250px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}.gallery-item:hover{background:#eae8df}.gallery-item img{width:62%;aspect-ratio:1;object-fit:contain;align-self:center;image-rendering:pixelated;transition:transform .25s}.gallery-item:hover img{transform:scale(1.12)}.gallery-item .id{font-size:.64rem;font-weight:700;color:#777}.gallery-item strong{font-size:clamp(.8rem,1.2vw,1.1rem);letter-spacing:-.04em;display:block;overflow-wrap:anywhere}.gallery-item small{font-size:.68rem;color:#666}.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:30px}.color-list{display:grid;grid-template-columns:repeat(11,1fr);gap:10px;min-height:170px}.color-list button{border:0;background:transparent;padding:5px}.color-list img{width:100%;aspect-ratio:1;image-rendering:pixelated}.color-list button:hover{transform:scale(1.15)}.interlude{height:330px;padding:30px clamp(18px,4vw,64px);overflow:hidden;background:#e9e7df}.interlude #wave-art{display:flex;justify-content:space-around;align-items:center;height:230px}.interlude img{width:70px;height:70px;image-rendering:pixelated}.wave img:nth-child(even){transform:translateY(28px)}.orbit{background:#f5f3ec;border-block:1px solid #d8d6ce}.orbit #orbit-art{position:relative;width:270px;height:270px;margin:-25px auto}.orbit img{position:absolute;left:100px;top:100px;transform:rotate(var(--a)) translateX(105px) rotate(calc(-1 * var(--a)));width:55px;height:55px}.grid-work{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}.grid-work>.grid-art{width:min(100%,420px);justify-self:center}.grid-controls{display:flex;align-items:flex-start;flex-direction:column;gap:20px}.grid-controls label{font-size:.7rem;font-weight:700;letter-spacing:.12em}.grid-controls select{border:1px solid #999;background:transparent;padding:14px;width:min(100%,350px)}.random-section{background:#171714;color:#f5f3ec;padding:80px clamp(18px,4vw,64px);min-height:650px}.random-section .section-label{border-color:#555}.random-section h2{font-size:clamp(3.6rem,7vw,8rem)}.random-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center}.random-inner .button{margin-top:40px}.random-result{text-align:center}.random-result img{width:min(33vw,390px);height:auto;aspect-ratio:1;image-rendering:pixelated}.random-result div{font-size:.8rem;letter-spacing:.1em;font-weight:700;margin-top:20px}.fifty-five{padding:50px clamp(18px,4vw,64px);display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:350px}.fifty-five>div:first-child{font-size:clamp(10rem,26vw,29rem);line-height:.8;letter-spacing:-.13em;font-weight:700;display:flex;align-items:end}.fifty-five span{font-size:.7rem;line-height:1.5;letter-spacing:.1em;margin:0 0 20px 30px}.fifty-five #mini-field{display:grid;grid-template-columns:repeat(11,1fr);gap:12px}.fifty-five img{width:100%;image-rendering:pixelated}.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.book-visual{height:470px;background:#e9e7df;display:grid;place-items:center;overflow:hidden}.book-visual img{height:85%;max-width:80%;object-fit:contain;box-shadow:12px 15px 25px #0003}.book-visual.paperback{background:#dedbd2;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:50px 15%;font-weight:700;letter-spacing:-.09em;font-size:clamp(4rem,8vw,8rem);line-height:.85}.paperback small{font-size:.7rem;letter-spacing:.1em;line-height:1.5}.book-meta{display:flex;justify-content:space-between;gap:20px;padding-top:20px}.book-meta h3{font-size:1.8rem;letter-spacing:-.05em;margin:10px 0}.book-meta p{max-width:360px;line-height:1.5}.book-meta a,.book-meta .soon{font-size:.7rem;font-weight:700;letter-spacing:.08em;white-space:nowrap}.book-meta a{text-decoration:underline}.soon{color:#777}.about{background:#e9e7df}.about p{font-size:1.2rem;max-width:450px;margin-top:40px}footer{padding:30px clamp(18px,4vw,64px);display:flex;justify-content:space-between;align-items:center}footer span{font-size:.7rem}footer img{width:25px;height:25px;image-rendering:pixelated}dialog{border:0;padding:0;width:100vw;max-width:none;height:100vh;max-height:none;background:#f5f3ec;color:#171714}dialog::backdrop{background:#171714}.close{position:absolute;right:25px;top:15px;z-index:2;border:0;background:transparent;font-size:2.5rem}.viewer-shell{height:100%;padding:35px clamp(18px,4vw,64px);display:flex;flex-direction:column;justify-content:space-between}.viewer-top,.viewer-bottom{display:flex;justify-content:space-between;align-items:center}.viewer-top .segmented{margin:0 40px 0 0}.viewer-art{height:min(54vh,540px);width:min(54vh,540px);margin:auto}.viewer-bottom h2{font-size:clamp(2rem,5vw,5rem);line-height:1;margin:0;letter-spacing:-.07em}.viewer-bottom p{margin:8px 0}.viewer-controls{display:flex;gap:10px}.viewer-controls button{border:1px solid #171714;background:transparent;padding:12px 16px;font-weight:700}.viewer-controls button:hover{background:#171714;color:white}@media(max-width:900px){header{height:auto;min-height:64px;display:block;padding-top:14px;padding-bottom:12px}nav{overflow:auto;gap:18px;margin-top:12px;white-space:nowrap;padding-bottom:4px}.hero{min-height:690px}.gallery-list{grid-template-columns:repeat(4,1fr)}.color-list{grid-template-columns:repeat(8,1fr)}}@media(max-width:600px){.hero-inner{grid-template-columns:1fr;gap:20px}.hero h1{font-size:clamp(5rem,19vw,8rem)}.hero-art .grid-art{width:170px}.hero-bottom span:last-child{display:none}.section-label{margin-bottom:35px}.rule-layout,.grid-work,.random-inner,.book-grid{grid-template-columns:1fr}.rule-art{width:230px;margin:45px auto 0}.section-heading{display:block}.section-heading p{margin-top:24px}.gallery-list{grid-template-columns:repeat(2,1fr)}.gallery-item{min-height:200px;padding:13px}.gallery-item img{width:75%}.color-list{grid-template-columns:repeat(5,1fr)}.grid-work>.grid-art{width:270px}.grid-controls{margin-top:30px}.random-result{margin-top:45px}.random-result img{width:240px}.fifty-five{grid-template-columns:1fr}.fifty-five>div:first-child{font-size:40vw}.fifty-five #mini-field{margin-top:30px}.book-visual{height:350px}.book-visual.paperback{font-size:20vw}.book-meta{margin-bottom:35px}.viewer-art{height:min(48vh,320px);width:min(48vh,320px)}.viewer-bottom{display:block}.viewer-controls{margin-top:20px}.viewer-controls button{flex:1}.hero-actions{display:grid;grid-template-columns:1fr;gap:10px;width:100%;min-width:0}.hero-actions .button{width:100%;min-width:0;gap:10px}.hero-actions .text-link{width:max-content;max-width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
.book-visual.paperback{background:#f5f3ec url('./assets/book/paperback-wrap.png') right center / 200% 100% no-repeat;display:block;padding:0}
.gallery-item img,.color-list img,.fifty-five img{height:auto}
/* The original 5×5 PNG and this 5×5 overlay occupy identical square bounds. */
.grid-art{isolation:isolate;overflow:hidden}
.grid-art img{display:block;object-fit:fill}
.grid-art.show-grid::after{content:none}
.cell-grid,.pixel-reveal{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));pointer-events:none}
.cell-grid{z-index:3;opacity:0;box-shadow:inset 1px 1px 0 rgba(25,25,25,.28)}
.cell-grid span{box-shadow:inset -1px -1px 0 rgba(25,25,25,.28)}
.show-grid .cell-grid{opacity:1}
#hero-art .cell-grid{opacity:.5}
.pixel-reveal{z-index:2}
.pixel-reveal span{background-size:500% 500%;background-repeat:no-repeat;image-rendering:pixelated;opacity:0;animation:pixel-in 1ms steps(1,end) forwards}
@keyframes pixel-in{to{opacity:1}}
.replay{display:inline-block;border:0;border-bottom:1px solid #171714;background:transparent;padding:8px 0;margin-top:18px;color:#171714}
.replay:hover{color:#df4c31}
.interlude{height:360px}
.interlude-head{display:flex;justify-content:space-between;align-items:center}
.interlude-head span,.interlude-head button,#field-trigger{font-size:.7rem;font-weight:700;letter-spacing:.12em}
.interlude-head button,#field-trigger{border:1px solid #171714;background:transparent;padding:10px 14px}
.interlude-head button:hover,#field-trigger:hover{background:#171714;color:#f5f3ec}
#wave-art img{transition:transform .22s ease-out}
#orbit-art{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.fifty-five #mini-field{margin-top:20px}
.fifty-five img{aspect-ratio:1}
.gallery-item:nth-child(11n+1){grid-column:span 2;min-height:310px}
.gallery-item:nth-child(11n+1) img{width:44%}
section{scroll-margin-top:120px}
:root{scroll-behavior:auto}
@media(max-width:600px){.gallery-item:nth-child(11n+1){grid-column:span 2;min-height:270px}.gallery-item:nth-child(11n+1) img{width:33%}.interlude{height:300px}.interlude #wave-art{height:180px}.interlude img{width:45px;height:45px}.fifty-five #mini-field{gap:5px}}
@media(prefers-reduced-motion:reduce){#wave-art img,#orbit-art{transition:none}.pixel-reveal span{animation:none;opacity:1}}
.viewer-art{cursor:pointer}
.viewer-shell{overflow:hidden}
.viewer-art.bursting{overflow:visible}
.burst-cells{position:absolute;inset:0;z-index:2;pointer-events:none}
.burst-cell{position:absolute;width:20%;height:20%;display:block;image-rendering:pixelated}
.burst-button{align-self:center;border:1px solid #171714;background:transparent;color:#171714;padding:11px 18px;font-size:.72rem;font-weight:700;letter-spacing:.1em;white-space:nowrap}
.burst-button:hover{background:#171714;color:#f5f3ec}
@media(max-width:600px){.burst-button{margin:8px 0 18px}}

.collect{background:#f5f3ec}
.collect-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:center}
.collect-copy{max-width:430px;font-size:1.05rem;line-height:1.55;margin:28px 0 30px}
.collect-cta{width:max-content}
.collect-note{max-width:520px;margin-top:18px;font-size:.72rem;line-height:1.5;color:#6f6d66}
.collect-art{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:center}
.collect-art img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;image-rendering:pixelated}
.collect-art img:nth-child(2){transform:translateY(-18%)}
.collect-art img:nth-child(3){transform:translateY(12%)}
@media(max-width:600px){.collect-layout{grid-template-columns:1fr}.collect-art{margin-top:48px;gap:10px}.collect-art img:nth-child(2){transform:translateY(-10%)}.collect-art img:nth-child(3){transform:translateY(8%)}}

@media(max-width:600px){
  .collect{padding-bottom:70px}
  .collect-copy{margin:24px 0 26px}
  .collect-note{font-size:.78rem;line-height:1.55;margin-top:16px}
  .collect-art{margin-top:30px;gap:6px}
  .collect-art img:nth-child(2){transform:translateY(-6%)}
  .collect-art img:nth-child(3){transform:translateY(4%)}
}

.books-showcase{display:grid;grid-template-columns:minmax(260px,.78fr) 1.22fr;gap:clamp(36px,6vw,90px);align-items:center}
.books-cover{min-height:520px;background:#e9e7df;display:grid;place-items:center;padding:clamp(28px,5vw,64px)}
.books-cover img{display:block;width:auto;height:auto;max-width:100%;max-height:430px;object-fit:contain;box-shadow:12px 15px 25px #0003}
.edition-list{border-top:1px solid #aaa99f}
.edition-row{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;padding:30px 0;border-bottom:1px solid #aaa99f}
.edition-copy span{font-size:.66rem;font-weight:700;letter-spacing:.14em}
.edition-copy h3{font-size:clamp(2rem,4vw,4.2rem);line-height:.95;letter-spacing:-.06em;margin:10px 0 12px}
.edition-copy p{max-width:500px;line-height:1.55;margin:0}
.edition-action{align-self:end}
.edition-action a,.edition-action .soon{font-size:.72rem;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.edition-action a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){
  .books-showcase{grid-template-columns:1fr;gap:30px}
  .books-cover{min-height:0;padding:28px 22px}
  .books-cover img{max-height:330px}
  .edition-row{grid-template-columns:1fr;gap:16px;padding:24px 0}
  .edition-action{align-self:start}
}

.assets{background:#111;color:#f5f3ec}
.assets .section-label{border-color:#555}
.assets-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:7vw;align-items:center}
.assets-copy{max-width:520px;font-size:1.05rem;line-height:1.6;margin:28px 0 30px}
.assets-cta{background:#f5f3ec;color:#111;width:max-content}
.assets-note{max-width:560px;margin-top:18px;font-size:.75rem;line-height:1.55;color:#aaa}
.assets-card{background:#f5f3ec;color:#111;padding:34px;display:grid;gap:22px;min-height:340px;align-content:center}
.assets-card strong{font-size:clamp(2rem,4vw,4.6rem);line-height:.9;letter-spacing:-.05em}
.assets-card span{font-size:.78rem;font-weight:700;letter-spacing:.08em}
.assets-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:center}
.assets-mini img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;image-rendering:pixelated}
@media(max-width:700px){
  .assets-layout{grid-template-columns:1fr;gap:32px}
  .assets-card{min-height:0;padding:26px}
  .assets-mini{gap:8px}
}

.assets-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media(max-width:700px){
  .assets-actions{display:grid;grid-template-columns:1fr}
  .assets-actions .assets-cta{width:100%;justify-content:space-between}
}

.menu-toggle{display:none}


/* Mobile navigation refinement v3 */
@media(max-width:900px){
  body{padding-top:56px}
  header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:none !important;
    height:56px;
    min-height:56px;
    padding:0 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:#f5f3ec;
    border-bottom:1px solid #d8d6ce;
    z-index:2147483000;
    transform:none !important;
    will-change:auto;
    backdrop-filter:none;
  }
  header .brand{
    flex:1 1 auto;
    min-width:0;
    font-size:.98rem;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .menu-toggle{
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    width:auto;
    min-width:56px;
    max-width:72px;
    height:32px;
    border:1px solid #171714;
    background:#171714;
    color:#f5f3ec;
    padding:0 8px;
    font-size:.61rem;
    font-weight:700;
    letter-spacing:.08em;
    white-space:nowrap;
  }
  .menu-toggle:hover,.menu-toggle[aria-expanded="true"]{
    background:#171714;
    color:#f5f3ec;
  }
  header nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    margin:0;
    padding:0;
    max-height:0;
    overflow:hidden;
    background:#f5f3ec;
    border-bottom:0;
    opacity:0;
    visibility:hidden;
    transition:max-height .22s ease,opacity .18s ease;
    z-index:2147483001;
  }
  header.menu-open nav{
    max-height:360px;
    opacity:1;
    visibility:visible;
    border-bottom:1px solid #171714;
  }
  header nav a{
    display:flex;
    align-items:center;
    min-height:44px;
    min-width:0;
    padding:0 12px;
    border-top:1px solid #d8d6ce;
    font-size:.64rem;
    letter-spacing:.1em;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  header nav a:nth-child(odd){border-right:1px solid #d8d6ce}
  section{scroll-margin-top:68px}
}
@media(max-width:600px){
  html,body{max-width:100%;overflow-x:clip}
  body{padding-top:54px}
  header{height:54px;min-height:54px;padding:0 10px 0 8px;overflow:hidden}
  header .brand{font-size:.94rem}
  .menu-toggle{width:48px;min-width:48px;max-width:48px;height:30px;font-size:.56rem;padding:0 4px;letter-spacing:.06em;margin-right:0}
  header nav a{min-height:42px;padding:0 10px;font-size:.62rem}
}

/* Official Fourthwall shop */
.shop{background:#e9e7df}
.shop-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:center}
.shop-copy{max-width:500px;font-size:1.05rem;line-height:1.6;margin:28px 0 30px}
.shop-cta{width:max-content}
.shop-note{max-width:520px;margin-top:18px;font-size:.72rem;line-height:1.5;color:#6f6d66}
.shop-art{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,2vw,24px);max-width:460px;justify-self:center;width:100%}
.shop-art img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;image-rendering:pixelated;background:#f5f3ec;padding:12%}
@media(max-width:700px){
  .shop-layout{grid-template-columns:1fr;gap:32px}
  .shop-art{max-width:360px;margin-top:10px;gap:10px}
  .shop-cta{width:100%;justify-content:space-between}
}

/* Safari/WebKit-only fixes for the artwork viewer. Keep these selectors isolated. */
@supports (-webkit-touch-callout: none){
  #viewer-close:focus,
  #viewer-close:focus-visible{
    outline:none;
    box-shadow:none;
  }

  #viewer-art img{
    min-width:0;
    min-height:0;
  }
}

.assets-products{display:grid;gap:8px;border-top:1px solid #c9c6bc;padding-top:18px}.assets-products span{font-size:.68rem;line-height:1.35;letter-spacing:.08em}

/* 2026 information architecture: collection -> explore -> arcade -> products */
.play-cta{background:#df4c31;color:#fff;border-color:#df4c31}.play-cta:hover{background:#171714;border-color:#171714}
.play-with{padding-bottom:44px;background:#f5f3ec}.play-with-heading{margin-bottom:0}.play-with-heading p{max-width:390px}
.sub-label{margin-bottom:38px;color:#666}
.arcade{background:#e9e7df}.arcade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#aaa99f;border:1px solid #aaa99f}.game-card{background:#f5f3ec;padding:clamp(26px,4vw,54px);min-height:360px;display:flex;flex-direction:column;align-items:flex-start;transition:background .2s}.game-card:hover{background:#171714;color:#f5f3ec}.game-card span{font-size:.64rem;font-weight:800;letter-spacing:.14em}.game-card strong{font-size:clamp(3rem,6vw,7rem);line-height:.82;letter-spacing:-.08em;margin:38px 0 22px}.game-card p{max-width:330px;line-height:1.55;margin:0 0 32px}.game-card b{margin-top:auto;font-size:.72rem;letter-spacing:.1em}.game-card.live strong{color:#df4c31}.game-card.live:hover strong{color:#f5f3ec}.arcade-note{font-size:.72rem;color:#666;margin:18px 0 0}
@media(max-width:900px){.hero-actions{flex-wrap:wrap;gap:12px}.hero-actions .button{min-width:min(100%,250px)}}
@media(max-width:700px){.arcade-grid{grid-template-columns:1fr}.game-card{min-height:270px}.game-card strong{margin-top:28px}.play-with{padding-bottom:26px}}

.collect-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.collect-actions .collect-cta{width:max-content}@media(max-width:700px){.collect-actions{display:grid;grid-template-columns:1fr}.collect-actions .collect-cta{width:100%;justify-content:space-between}}


/* FrameNudge creator tool */
.tools{background:#171714;color:#f5f3ec}
.tools .section-label{border-color:#555}
.tools-layout{display:grid;grid-template-columns:1.04fr .96fr;gap:7vw;align-items:center}
.tools-kicker{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.14em;color:#b98cff;margin-bottom:18px}
.tools-copy{max-width:620px;font-size:1.05rem;line-height:1.65;margin:28px 0 24px}
.tools-copy strong{color:#c99cff}
.tools-points{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.tools-points span{border:1px solid #555;padding:8px 10px;font-size:.62rem;font-weight:800;letter-spacing:.1em}
.tools-actions{display:flex;flex-wrap:wrap;gap:10px}
.tools-actions .button{background:#f5f3ec;color:#171714}
.tools-actions .button:hover{background:#b35bea;color:#fff;border-color:#b35bea}
.tools-note{max-width:620px;margin:18px 0 0;font-size:.7rem;line-height:1.55;color:#aaa}
.tools-demo{min-width:0}
.tools-demo-link{display:block;border:1px solid #5a5062;box-shadow:18px 18px 0 #b35bea22;background:#0f0f10;overflow:hidden;aspect-ratio:4/3}
.tools-demo-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center 34%;transition:transform .2s ease}
.tools-demo-link:hover .tools-demo-image{transform:scale(1.01)}
.fn-window{border:1px solid #5a5062;background:#0f0f10;padding:16px;box-shadow:18px 18px 0 #b35bea22}
.fn-top{display:flex;justify-content:space-between;gap:14px;align-items:center;border-bottom:1px solid #35323a;padding-bottom:12px}
.fn-top strong{font-size:1rem;letter-spacing:-.03em}.fn-top span{font-size:.62rem;color:#aaa}
.fn-toolbar{display:flex;gap:6px;padding:12px 0;overflow:hidden}
.fn-toolbar span,.fn-toolbar b{font-size:.58rem;letter-spacing:.06em;border:1px solid #4d4951;padding:8px 9px;white-space:nowrap}
.fn-toolbar b{background:#8f3fd1;color:#fff;border-color:#8f3fd1}
.fn-stage{display:grid;grid-template-columns:150px 1fr;gap:10px}
.fn-frames{display:grid;gap:7px;align-content:start}
.fn-frames span{border:1px solid #403b45;padding:14px 9px;font-size:.58rem;color:#bbb}
.fn-canvas{min-height:260px;position:relative;background:repeating-conic-gradient(#202022 0 25%,#171719 0 50%) 0/24px 24px;overflow:hidden}
.fn-pixel{position:absolute;width:54px;height:54px;background:#8f3fd1;image-rendering:pixelated}
.fn-pixel:after{content:'';position:absolute;width:18px;height:18px;background:#f5f3ec;left:18px;top:18px}
.fn-pixel.p1{left:24%;top:42%}.fn-pixel.p2{left:42%;top:35%;transform:scaleY(.75)}.fn-pixel.p3{left:59%;top:40%;transform:scaleX(1.2)}.fn-pixel.p4{left:76%;top:32%;transform:scale(.8)}
.fn-export{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.fn-export span{text-align:center;border:1px solid #403b45;padding:10px 6px;font-size:.58rem;letter-spacing:.08em;color:#ddd}
@media(max-width:800px){.tools-layout{grid-template-columns:1fr;gap:36px}.tools-actions{display:grid;grid-template-columns:1fr 1fr}.tools-actions .button{width:100%}.fn-stage{grid-template-columns:105px 1fr}.fn-canvas{min-height:220px}}
@media(max-width:520px){.tools-actions{grid-template-columns:1fr}.fn-stage{grid-template-columns:82px 1fr}.fn-canvas{min-height:190px}.fn-pixel{width:38px;height:38px}.fn-pixel:after{width:12px;height:12px;left:13px;top:13px}.fn-top{display:block}.fn-top span{display:block;margin-top:4px}}
