:root{--ink:#151413;--cream:#f6eddb;--paper:#fffdf5;--red:#f34a37;--blue:#3165e8;--yellow:#ffcb3d;--line:#20201d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:"DM Mono",monospace}.site-shell{overflow:hidden}.topbar{height:76px;border-bottom:2px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,76px);background:#fff9eb}.brand{color:var(--ink);text-decoration:none;font:700 19px Fredoka,sans-serif;letter-spacing:.8px}.brand-spark{color:var(--red);font-size:24px}.how-link{font-size:11px;font-weight:bold;color:var(--ink);text-decoration:none}.how-link span{font-size:18px;margin-left:5px}.hero{min-height:590px;max-width:1320px;margin:auto;padding:clamp(52px,8vw,105px) clamp(24px,7vw,105px) 64px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:35px}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:1.2px;margin:0 0 17px}.eyebrow span{display:inline-block;width:8px;height:8px;background:var(--red);transform:rotate(45deg);margin-right:8px}h1,h2,h3{font-family:Fredoka,sans-serif;margin:0}h1{font-size:clamp(58px,7vw,101px);line-height:.86;letter-spacing:-3px}h1 em,h2 em{font-family:"Permanent Marker",cursive;color:var(--red);font-style:normal;font-weight:400;letter-spacing:-2px}.intro{font-size:14px;line-height:1.75;max-width:375px;margin:25px 0}.primary-cta,.start-button{background:var(--ink);color:white;border:0;text-decoration:none;display:inline-flex;align-items:center;gap:25px;padding:15px 17px;font:700 12px "DM Mono",monospace;box-shadow:4px 4px 0 var(--red);transition:transform .18s,box-shadow .18s}.primary-cta:hover,.start-button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--red)}.primary-cta b{font-size:19px}.tiny-note{font-size:9px;margin-top:19px}.hero-art{min-height:388px;position:relative}.notebook-paper{position:absolute;width:min(390px,86%);height:340px;right:5%;top:22px;background:repeating-linear-gradient(#fffdf8 0 29px,#c2d6e4 30px 31px);border:2px solid var(--ink);transform:rotate(-3deg);box-shadow:10px 12px 0 #e3cf9f;overflow:hidden}.notebook-paper:before{content:"";position:absolute;top:0;bottom:0;left:45px;border-left:2px solid #f3a6a0}.scribble-top{font:22px "Permanent Marker",cursive;position:absolute;top:30px;left:70px;transform:rotate(-2deg)}.comic-burst{width:145px;height:145px;background:var(--yellow);clip-path:polygon(50% 0,59% 19%,75% 4%,75% 25%,96% 21%,80% 38%,100% 50%,80% 59%,93% 79%,71% 75%,63% 100%,49% 79%,35% 97%,30% 75%,6% 83%,20% 60%,0 49%,20% 41%,7% 18%,30% 25%,35% 0);position:absolute;top:86px;left:130px;display:grid;place-items:center;text-align:center;font:26px/.9 Fredoka,sans-serif;transform:rotate(12deg)}.pen{position:absolute;height:26px;width:180px;border:2px solid var(--ink);border-radius:3px;transform-origin:center;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.18))}.pen:before{content:"";position:absolute;right:-21px;top:3px;border-left:20px solid var(--ink);border-top:8px solid transparent;border-bottom:8px solid transparent}.pen:after{content:"";position:absolute;right:-16px;top:5px;border-left:15px solid #f3c9ac;border-top:6px solid transparent;border-bottom:6px solid transparent}.pen i{position:absolute;left:8px;top:-7px;width:56px;height:10px;border:2px solid var(--ink);border-bottom:0;border-radius:7px 7px 0 0}.pen b{position:absolute;left:70px;top:0;height:100%;border-left:2px solid rgba(0,0,0,.35)}.pen-red{background:var(--red)}.pen-blue{background:var(--blue)}.hero-pen-red{left:48px;bottom:55px;transform:rotate(-31deg)}.hero-pen-blue{right:25px;bottom:48px;transform:rotate(149deg)}.paper-tape{position:absolute;width:90px;height:22px;background:rgba(255,205,79,.65);right:-17px;top:15px;transform:rotate(35deg)}.doodle{position:absolute;font-family:"Permanent Marker";z-index:1}.doodle-star{font-size:38px;color:var(--red);left:5%;top:4%}.doodle-spiral{font-size:51px;color:var(--blue);right:4%;top:-5%;transform:rotate(-20deg)}.doodle-heart{font-size:76px;color:var(--yellow);left:-1%;bottom:2%}.arena-section{background:var(--blue);padding:85px 24px 76px;color:white;text-align:center}.section-heading h2{font-size:clamp(43px,5vw,66px);letter-spacing:-2px;line-height:.95}.section-heading>p:last-child{font-size:12px;line-height:1.7;margin:14px 0 30px}.game-card{max-width:720px;margin:28px auto 0;background:var(--cream);border:2px solid var(--ink);color:var(--ink);box-shadow:9px 9px 0 var(--ink)}.scorebar{height:61px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);padding:0 18px;font-size:10px;font-weight:bold}.player-score{display:flex;gap:9px;align-items:center}.player-score strong{font:25px Fredoka,sans-serif}.player-dot{width:11px;height:11px;border:2px solid var(--ink);border-radius:50%;background:var(--red)}.player-two .player-dot{background:var(--blue)}.round-label{line-height:1;text-align:center;font-size:9px}.round-label b{font:20px Fredoka,sans-serif;display:block}.game-stage{height:330px;position:relative;overflow:hidden;background:#d9a86d;background-image:repeating-linear-gradient(0deg,transparent 0 43px,rgba(116,67,29,.15) 44px 46px),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 63px,rgba(65,31,7,.12) 65px 68px)}.desk-logo{font:19px/.76 "Permanent Marker",cursive;color:rgba(45,27,12,.32);position:absolute;top:45%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);white-space:nowrap}.desk-logo span{font-size:13px}.arena-pen{top:60%;width:154px;transition:left .45s cubic-bezier(.22,.8,.3,1),top .45s,transform .45s}.arena-pen:before{right:-21px}.arena-pen:first-of-type{left:13%;transform:rotate(-15deg)}#penTwo{right:13%;transform:rotate(164deg);transform-origin:center}.chalk{position:absolute;font:29px "Permanent Marker",cursive;color:rgba(255,255,255,.55)}.chalk-one{left:12%;top:20%}.chalk-two{right:12%;bottom:16%}.game-message{position:absolute;inset:0;display:grid;place-items:center;font:44px "Permanent Marker",cursive;color:#fff;text-shadow:3px 3px 0 var(--ink);pointer-events:none;transition:opacity .2s}.start-button{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);box-shadow:4px 4px 0 var(--yellow);white-space:nowrap}.start-button:hover{transform:translate(calc(-50% + 2px),2px);box-shadow:2px 2px 0 var(--yellow)}.impact{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) rotate(-10deg);font:60px Fredoka,sans-serif;color:var(--yellow);text-shadow:3px 3px 0 var(--ink);z-index:4}.hidden{display:none}.controls{display:flex;justify-content:space-between;align-items:center;padding:17px 23px;background:var(--paper);font-size:10px;text-align:left}.controls>div{display:grid;gap:4px}.controls>div:last-child{text-align:right}.controls p{text-align:center;font-size:9px;line-height:1.5;margin:0}.controls small{font-size:9px}.keycaps kbd{font-family:"DM Mono";border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);padding:4px 6px;background:white;margin-right:2px}.player-two .keycaps{direction:rtl}.under-game{font-size:10px;margin:24px 0 0}.how-section{padding:100px clamp(24px,10vw,140px);background:var(--paper)}.left-align{text-align:left}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:45px}.steps article{border-top:2px solid var(--ink);padding:15px 8px 10px;position:relative}.step-number{font:11px "DM Mono";color:var(--red)}.step-icon{font-size:44px;height:57px;margin-top:13px}.target{font:51px Fredoka,sans-serif;color:var(--red)}.steps h3{font-size:23px}.steps p{font-size:11px;line-height:1.65;max-width:210px}.memory-banner{background:var(--yellow);border-top:2px solid var(--ink);padding:65px 24px 58px;text-align:center;font:clamp(24px,3vw,38px)/1.08 "Permanent Marker",cursive;position:relative}.memory-banner p{margin:0}.banner-squiggle{font-size:80px;color:var(--red);position:absolute;right:12%;bottom:-16px;transform:rotate(-25deg)}footer{display:flex;justify-content:space-between;gap:25px;padding:18px clamp(20px,5vw,76px);background:var(--ink);color:#fff;font-size:9px}footer b{font-size:17px;color:var(--yellow)}
@media(max-width:700px){.topbar{height:65px}.how-link{font-size:9px}.hero{grid-template-columns:1fr;padding-top:57px;gap:28px}.hero-art{min-height:300px}.notebook-paper{height:270px;right:7%;width:82%}.scribble-top{font-size:18px;left:57px;top:27px}.comic-burst{transform:scale(.78) rotate(12deg);left:27%;top:61px}.hero-pen-red{left:7%;bottom:26px}.hero-pen-blue{right:0;bottom:30px}.arena-section{padding:68px 14px}.game-stage{height:290px}.scorebar{padding:0 10px}.player-score{gap:5px}.player-score span:not(.player-dot){font-size:8px}.controls{padding:17px 11px}.controls p{display:none}.steps{grid-template-columns:1fr;gap:16px;margin-top:34px}.steps article{display:grid;grid-template-columns:42px 64px 1fr;column-gap:9px;align-items:center}.step-number{grid-column:1}.step-icon{grid-column:2;grid-row:1/3;margin:0}.steps h3{grid-column:3;grid-row:1}.steps p{grid-column:3;grid-row:2;margin:3px 0}.how-section{padding-top:76px}.memory-banner{padding:54px 20px}.arena-pen{width:130px}footer{font-size:8px}}

#penOne{left:13%;transform:rotate(-15deg)}

.environment-picker{max-width:620px;margin:29px auto 0;border-top:2px dashed rgba(21,20,19,.55);padding-top:18px;font-size:10px}.environment-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:11px}.environment-options button{min-height:64px;background:rgba(255,253,245,.87);border:2px solid var(--ink);font:700 9px "DM Mono";cursor:pointer}.environment-options button:hover,.environment-options button.active{background:var(--yellow);box-shadow:2px 2px 0 var(--ink)}.environment-options span,.environment-options small{display:block}.environment-options span{font:22px Fredoka;color:var(--red)}.environment-options small{font:8px "DM Mono";margin-top:3px}.environment-label{position:absolute;right:12px;top:10px;padding:5px 7px;background:rgba(255,253,245,.86);border:1px solid var(--ink);font-size:8px;z-index:5}.environment-label button{border:0;border-left:1px solid var(--ink);background:transparent;margin-left:6px;padding-left:6px;font:8px "DM Mono";cursor:pointer}.environment-library{background-color:#4d3d33!important;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 2px 57px),linear-gradient(rgba(38,26,18,.22),rgba(38,26,18,.22))!important}.environment-playground{background-color:#77b86b!important;background-image:radial-gradient(circle at 15% 18%,rgba(255,244,168,.85) 0 23px,transparent 24px),repeating-linear-gradient(0deg,transparent 0 43px,rgba(30,95,36,.12) 44px 46px)!important}.environment-home{background-color:#728aa8!important;background-image:repeating-linear-gradient(115deg,transparent 0 31px,rgba(215,232,255,.28) 32px 34px),linear-gradient(rgba(25,41,72,.14),rgba(25,41,72,.14))!important}.environment-library .desk-logo,.environment-home .desk-logo{color:rgba(255,255,255,.27)}.environment-playground .desk-logo{color:rgba(25,88,32,.35)}

.welcome-screen{position:fixed;inset:0;z-index:20;background:rgba(31,35,43,.89);display:grid;place-items:center;padding:20px}.welcome-card{width:min(440px,100%);min-height:510px;background:var(--paper);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--red);padding:39px;text-align:center;position:relative;background-image:linear-gradient(90deg,transparent 48px,#efb7ae 49px,#efb7ae 51px,transparent 52px),repeating-linear-gradient(#fffdf8 0 30px,#d5e5f0 31px 32px)}.welcome-card .brand{display:block;margin-bottom:54px}.welcome-card h2{font-size:52px;line-height:.85;margin-bottom:31px}.welcome-primary{border:2px solid var(--ink);background:var(--ink);box-shadow:4px 4px 0 var(--red);color:#fff;font:700 12px "DM Mono";padding:15px 18px;cursor:pointer}.welcome-primary b{font-size:18px;margin-left:18px}.auth-choice{display:grid;gap:15px}.text-button{border:0;background:transparent;text-decoration:underline;font:10px "DM Mono";cursor:pointer}.form-note{font-size:9px;margin-top:25px}.auth-form{display:grid;gap:13px;text-align:left}.auth-form label{font-size:9px;font-weight:bold;display:grid;gap:5px}.auth-form input{background:rgba(255,255,255,.8);border:2px solid var(--ink);padding:12px;font:12px "DM Mono"}.hidden{display:none!important}.nav-actions{display:flex;align-items:center;gap:20px}.workshop-link{border:0;background:transparent;font:700 10px "DM Mono";cursor:pointer}.token-count{background:var(--yellow);border:1px solid var(--ink);padding:5px 8px;font-size:10px;font-weight:bold}.mode-picker{min-height:330px;background:#d9a86d;background-image:repeating-linear-gradient(0deg,transparent 0 43px,rgba(116,67,29,.15) 44px 46px),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 63px,rgba(65,31,7,.12) 65px 68px);padding:61px 20px}.mode-picker>p{font:29px "Permanent Marker";margin:0 0 25px}.mode-options{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;max-width:620px;margin:auto}.mode-options button{min-height:114px;border:2px solid var(--ink);background:var(--paper);font:700 15px Fredoka;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}.mode-options button:hover{background:var(--yellow)}.mode-options button b,.mode-options button small{display:block}.mode-options button b{font-size:31px;color:var(--red)}.mode-options button small{font:9px "DM Mono";margin-top:7px}.workshop-modal{position:fixed;z-index:25;inset:0;background:rgba(21,20,19,.68);padding:20px;overflow:auto}.workshop-card{max-width:900px;margin:4vh auto;background:var(--paper);border:2px solid var(--ink);box-shadow:9px 9px 0 var(--yellow);padding:33px;position:relative}.workshop-card h2{font-size:46px}.close-button{position:absolute;right:16px;top:12px;border:0;background:transparent;font:36px Fredoka;cursor:pointer}.workshop-layout{display:grid;grid-template-columns:230px 1fr;gap:35px;margin-top:24px}.loadout-preview{background:#d9a86d;background-image:repeating-linear-gradient(0deg,transparent 0 38px,rgba(70,31,8,.18) 39px 41px);min-height:370px;border:2px solid var(--ink);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:20px;position:relative}.workshop-pen{position:absolute;width:190px;top:130px;left:22px;transform:rotate(-90deg)}.preview-band{width:16px;height:38px;position:absolute;top:202px;left:103px;border:5px solid #ff765a;border-radius:50%}.loadout-preview p{font:700 12px Fredoka;margin:0}.loadout-preview small{font-size:8px;margin-top:5px}.workshop-controls h3{font-size:16px;margin:0 0 10px}.collection-grid,.stat-upgrades,.materials{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:23px}.pen-card,.upgrade-card,.material-card{border:2px solid var(--ink);background:#fff;padding:9px;cursor:pointer;font:10px "DM Mono";min-width:103px;text-align:left}.pen-card.active,.material-card.active{background:var(--yellow)}.pen-swatch{width:44px;height:9px;border:1px solid var(--ink);margin-bottom:7px}.upgrade-card{cursor:default;min-width:145px}.upgrade-card b{display:block;font:15px Fredoka}.upgrade-card button{margin-top:7px;border:1px solid var(--ink);background:var(--red);color:#fff;padding:5px;font:9px "DM Mono";cursor:pointer}.upgrade-card button:disabled{opacity:.4;cursor:not-allowed}.material-card{display:grid;gap:5px}.material-card span{font:20px Fredoka}.workshop-message{font-size:10px;border-top:1px solid var(--ink);padding-top:14px;margin:24px 0 0}@media(max-width:700px){.nav-actions{gap:9px}.token-count{font-size:8px}.workshop-link{font-size:8px}.mode-options{grid-template-columns:1fr}.mode-picker{padding:28px 22px}.mode-options button{min-height:76px}.workshop-card{padding:25px 16px}.workshop-layout{grid-template-columns:1fr}.loadout-preview{min-height:240px}.workshop-pen{top:77px;left:calc(50% - 95px)}.preview-band{top:149px;left:calc(50% - 11px)}}
