:root{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;background:#101a1b;color:#f7f8ed}
body{background:radial-gradient(circle at 8% 8%,#24473a 0,transparent 32%),radial-gradient(circle at 93% 33%,#283643 0,transparent 24%),#101a1b}
h1,h2,h3,.brand,strong,.chip,.lime-btn{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.shell{max-width:1300px}
.topbar{background:#101a1be8;backdrop-filter:blur(16px);border-color:#3e594f;position:relative;z-index:2}
.topbar .shell{min-height:78px}
.brand-mark{height:52px;width:62px;border-radius:17px;background:#cbff63;box-shadow:0 7px 0 #253b26,0 0 30px #cbff6340;color:#182320;font-size:1.4rem;transform:rotate(-7deg)}
.brand strong{font-size:1.52rem;letter-spacing:-.075em;color:#fff}
.brand small{color:#c6e1cb;font-size:.68rem;letter-spacing:.11em}
.quiet-btn{background:#223432;border-color:#486159;color:#eff8ed;border-radius:13px}
.headline{position:relative;isolation:isolate;min-height:440px;display:flex;align-items:center;padding:38px 36px 42px;margin:22px 0 20px;background:radial-gradient(circle at 88% 20%,#d6ff72 0,#b8ed54 35%,#80bc69 70%,#599981 100%);border:2px solid #dbff86;border-radius:32px;box-shadow:0 25px 65px #070e1277;overflow:hidden}
.headline::before{content:'';position:absolute;width:580px;height:580px;border:2px solid #efffc360;border-radius:50%;right:-70px;top:-100px;box-shadow:0 0 0 46px #ebffb522,0 0 0 100px #ecffc018;z-index:-1}
.headline::after{content:'PUPUSH';position:absolute;right:19px;bottom:-56px;font:900 clamp(8rem,18vw,17rem)/1 Outfit,sans-serif;letter-spacing:-.1em;color:#245e3d16;z-index:-1;pointer-events:none}
.hero-copy{position:relative;z-index:1;max-width:57%;align-self:center}
.headline .eyebrow{color:#1b5a48;background:#efffb4;padding:8px 12px;border-radius:999px;display:inline-block;letter-spacing:.08em;font-size:.72rem}
.headline h1{margin:22px 0 12px;font-size:clamp(3rem,5vw,5.9rem);line-height:.94;letter-spacing:-.085em;color:#132a28;font-weight:900;text-wrap:balance}
.headline h1 span{color:#fc6949;text-shadow:2px 3px #19382a}
.headline .hero-sub{font-size:clamp(.95rem,1.6vw,1.2rem);font-weight:700;color:#245041;max-width:440px;line-height:1.48}
.hero-link{display:inline-flex;align-items:center;gap:12px;background:#172a28;color:#d4ff70;text-decoration:none;border:1px solid #172a28;border-radius:16px;padding:13px 20px;font-weight:900;font-family:Outfit,sans-serif;box-shadow:0 7px 0 #4c8559;transition:transform .2s,box-shadow .2s}
.hero-link:hover{transform:translateY(3px);box-shadow:0 4px 0 #4c8559}
.hero-monkeys{position:absolute;right:5%;bottom:-26px;width:min(47%,535px);max-height:105%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 18px 24px #2258426b)}
.hero-sticker{position:absolute;right:5%;top:30px;border:2px solid #15312a;border-radius:50%;height:92px;width:92px;background:#ff7e55;color:#1c3127;display:grid;place-items:center;transform:rotate(14deg);font:900 1.15rem/.94 Outfit;text-align:center;box-shadow:5px 7px 0 #274f37}
.date-wrap{position:absolute;left:36px;bottom:17px;color:#204d3c;font-weight:900}.date-wrap input{background:#f5ffd5;border:2px solid #2a7251;color:#16342d;color-scheme:light}
.profile{grid-template-columns:145px 1fr;background:linear-gradient(110deg,#263d33,#1b302e);border:1px solid #55735a;padding:19px 25px;box-shadow:0 10px 24px #0002}
.pupu-art{height:130px}.pupu-art img{width:150px;height:140px;object-fit:contain}
.profile h2{font-size:1.6rem}.profile .eyebrow{color:#ccff6e}.profile p{color:#d3e3d6}.profile .stats{margin:10px 0}
.stats strong{color:#d5ff73;font-size:2rem}
.panel{background:#192927;border:1px solid #405e51;box-shadow:0 12px 28px #020d1026;border-radius:23px}
.panel-head h2{font-size:1.5rem}.panel-head .muted{color:#b7caba}.muted{color:#b2c5bd}
.lime-btn{background:#d3ff70;border-color:#d3ff70;color:#1b2f23;border-radius:13px;font-size:.94rem}.lime-btn:hover{background:#e5ffa8}
.search-wrap input,.field input,.field select{background:#10201f;border-color:#526f61;color:#fff;border-radius:13px}
.search-wrap input{font-size:1rem}
.chip{background:#233b34;border-color:#537260;color:#e0efdd}.chip.active{background:#d3ff70;border-color:#d3ff70;color:#172d24}
.machine-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 20px 24px;max-height:690px;overflow:auto;scrollbar-color:#5b7d68 transparent}
.machine{display:block;min-height:unset;padding:0;overflow:hidden;border:1px solid #426355;background:#223a33;border-radius:17px;transition:transform .15s,border-color .15s,box-shadow .15s}
.machine:hover{background:#2b4a3f;border-color:#bce871;transform:translateY(-2px)}
.machine.selected{background:#274637;border:2px solid #d3ff70;box-shadow:0 0 0 3px #d3ff7033}
.machine-art{display:block;aspect-ratio:3/2;background:#1d2e2b;overflow:hidden;position:relative}
.machine-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}.machine:hover .machine-art img{transform:scale(1.04)}
.machine-art::after{content:'↗';position:absolute;right:9px;top:9px;width:25px;height:25px;border-radius:7px;background:#d6ff77;color:#1e3828;display:grid;place-items:center;font-weight:900}
.machine-copy{padding:11px 13px 13px;display:block}.machine-copy strong{font-size:.97rem;line-height:1.16;white-space:normal;display:block;min-height:2.3em}.machine-copy small{display:block;margin-top:7px;white-space:normal;color:#b5d2be;line-height:1.3}
.machine-arrow{display:none}.list-top{color:#bbd3c1;padding-bottom:13px}.no-results{grid-column:1/-1}
.detail{background:linear-gradient(150deg,#203b35,#182725)}.detail-heading{align-items:center}.selected-icon{height:76px;width:112px;border-radius:14px;background:#24413d;overflow:hidden}.selected-icon img{width:100%;height:100%;object-fit:cover}
.select-hint{background:radial-gradient(circle at 50% 35%,#2b5444,transparent 45%);min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.select-hint .hint-icon{font-size:4rem;color:#d3ff70}
.last{background:#2b4937;border-color:#66825b;color:#d5e3d4}.last strong,.best,.goal-target strong{color:#d3ff70}
.section-line{background:#476250}.footer{border-color:#405b4d;color:#b4c8b7}
dialog{background:#1c302c;border:1px solid #688166}.close{background:#345347}
@media(max-width:820px){.machine-list{max-height:620px}.headline{min-height:390px}.hero-monkeys{width:45%}}
@media(max-width:600px){.shell{padding:0 15px}.topbar .shell{min-height:68px}.brand-mark{width:47px;height:41px;font-size:1.05rem}.brand strong{font-size:1.18rem}.brand small{display:none}.top-actions{gap:4px}.quiet-btn{font-size:.72rem;padding:7px;min-height:39px}.headline{min-height:510px;margin-top:12px;padding:23px 20px 26px;align-items:start;border-radius:23px}.hero-copy{max-width:100%;align-self:start}.headline h1{font-size:clamp(2.7rem,11vw,4rem);margin:18px 0 8px;max-width:330px}.headline .hero-sub{font-size:.94rem;max-width:270px;margin:0 0 11px}.hero-link{padding:10px 13px;font-size:.86rem}.hero-monkeys{width:76%;right:0;bottom:-29px;max-height:56%}.hero-sticker{top:auto;bottom:35px;left:17px;right:auto;width:68px;height:68px;font-size:.9rem}.date-wrap{bottom:24px;left:99px;z-index:1}.date-wrap input{width:137px}.profile{grid-template-columns:96px 1fr;gap:11px;padding:14px}.pupu-art{height:91px}.pupu-art img{width:110px;height:101px}.profile h2{font-size:1.12rem}.stats strong{font-size:1.4rem}.profile .stats{gap:14px}.profile p{font-size:.78rem}.machine-list{gap:9px;padding:0 10px 18px;max-height:610px}.machine-copy{padding:9px}.machine-copy strong{font-size:.85rem}.machine-copy small{font-size:.71rem}.panel-head{padding:18px 15px 0}.panel-head h2{font-size:1.25rem}.selected-icon{width:88px;height:65px}.detail-body{padding:16px}}
@media(max-width:375px){.topbar .shell{flex-wrap:wrap;justify-content:center;padding:9px 12px}.headline{min-height:535px}.hero-monkeys{width:87%}.profile{grid-template-columns:80px 1fr}}
@media(prefers-reduced-motion:reduce){.machine,.machine-art img,.hero-link{transition:none}}
.detail-heading{display:grid;grid-template-columns:1fr;gap:13px}
.selected-icon{width:100%;height:auto;aspect-ratio:3/2;max-height:260px;border:1px solid #6f966b}
.selected-icon img{object-fit:cover}
.detail-title{font-size:1.6rem}
.dialog-body .field small{font-size:.74rem;color:#b8ccb8;font-weight:500}
.dialog-body .field input[type=file]{padding:10px;font-size:.78rem}