:root{font-family:Arial,'Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif;color:#202019;background:#d7f545;font-synthesis:none;--ink:#202019;--lime:#d7f545;--pink:#f397c4;--blue:#2741e7;--mono:'SFMono-Regular',Consolas,monospace}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;min-width:280px;overflow-x:clip}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,p{margin:0}
button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
main:focus,section:focus{outline:none}
::selection{background:var(--blue);color:#fff}

.skip-link{position:fixed;top:12px;left:12px;z-index:100;padding:12px 16px;background:var(--ink);color:var(--lime);transform:translateY(-170%)}
.skip-link:focus{transform:none}

.site-header{min-height:86px;padding:14px clamp(20px,5vw,76px);display:flex;align-items:center;gap:28px;border-bottom:2px solid var(--ink)}
.wordmark{display:inline-flex;align-items:center;min-height:48px;font-size:34px;font-weight:900;letter-spacing:-.09em;white-space:nowrap;transform:rotate(-3deg)}
.seed-x{position:relative;display:inline-block;flex:none;width:.94em;height:1.1em;vertical-align:-.22em;margin:0 .025em;overflow:hidden;text-indent:-9999px;white-space:nowrap}
.seed-x img{position:absolute;left:50%;top:50%;width:1.7em;height:1.7em;max-width:none;transform:translate(-50%,-50%);filter:brightness(0)}
.wordmark .seed-x{margin-left:.12em}
.site-header nav a:is(:hover,:focus-visible) .seed-x img{filter:brightness(0) invert(1)}
.usage-control{position:relative;margin-left:auto}
.usage-control[data-open="true"]::before{content:"";position:absolute;z-index:89;top:100%;right:0;width:min(430px,calc(100vw - 36px));height:12px}
.usage-control[data-open="true"]::after{content:"";position:absolute;z-index:91;right:23px;top:calc(100% + 3px);width:12px;height:12px;background:#00edff;transform:rotate(45deg);pointer-events:none}
.header-usage{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;padding:10px 2px 7px;border:0;border-bottom:2px solid var(--ink);border-radius:0;background:none;color:inherit;white-space:nowrap;transition:color .18s,border-color .18s}
.header-usage:hover,.header-usage[aria-expanded="true"]{color:var(--blue);border-color:var(--blue)}
.header-usage>span:first-child{font:700 10px/1 var(--mono);letter-spacing:.03em}
.header-usage strong{font:900 22px/1 var(--mono);letter-spacing:-.06em}
.header-usage>span:last-child{font:700 16px/1 var(--mono)}
.usage-popover[hidden]{display:none}
.usage-popover{position:absolute;top:calc(100% + 10px);right:0;z-index:90;width:min(430px,calc(100vw - 36px));max-height:calc(100svh - 110px);overflow:auto;overscroll-behavior:contain;padding:19px 20px 13px;border:2px solid #00edff;background:#10121d;color:#f6f3ec;box-shadow:7px 7px 0 #ff00b8,-3px -3px 0 #00edff;isolation:isolate;animation:usage-pop-in .26s cubic-bezier(.16,1,.3,1) both}
.usage-popover::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#00edff15 3px 4px),linear-gradient(135deg,#6e00ff22,transparent 45%,#ff00b815)}
.usage-popover::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(180deg,transparent 47%,#00edff44 49.2%,#e7ff58 49.9%,#00edff 50.1%,#00edff44 50.8%,transparent 53%);opacity:0;animation:usage-signal-sweep .38s ease-out both}
.usage-popover-head{display:flex;align-items:start;justify-content:space-between;gap:10px;padding-bottom:11px;border-bottom:1px solid #00edff88}
.usage-signal{font:700 9px/1.2 var(--mono);letter-spacing:.13em;color:#00edff}
.usage-popover-title{position:relative;margin:5px 0 0;font:900 27px/1 var(--mono);letter-spacing:-.08em;text-shadow:2px 0 #ff00b8,-2px 0 #00edff}
.usage-popover-title span{color:#ff00b8}
.usage-popover-title .usage-title-channel{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;opacity:0}
.usage-popover-title .usage-title-channel-pink{color:#ff00b8;clip-path:inset(12% 0 62% 0);animation:usage-channel-pink .27s ease-out both}
.usage-popover-title .usage-title-channel-cyan{color:#00edff;clip-path:inset(61% 0 9% 0);animation:usage-channel-cyan .29s ease-out .025s both}
.usage-close{flex:none;width:38px;height:38px;border:1px solid #00edff;color:#00edff;background:#1a2031;font:28px/1 var(--mono);display:grid;place-items:center}
.usage-close:hover{background:#00edff;color:#10121d}
.usage-popover-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 0 14px}
.usage-popover-total>span{font:700 11px/1.2 var(--mono);color:#8eabd0}
.usage-popover-total strong{font:900 24px/1 var(--mono);letter-spacing:-.07em;color:#e7ff58;white-space:nowrap}
.usage-popover-list{border-top:1px solid #586278}
.usage-popover-loading{padding:18px 0;font:12px/1.5 var(--mono);color:#b6c5d3}
.usage-provider{--usage-accent:#00edff;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:56px;padding:8px 0;border-bottom:1px solid #586278}
.usage-source-copilot{--usage-accent:#ff00b8}
.usage-source-claude_code{--usage-accent:#ff9566}
.usage-source-antigravity{--usage-accent:#a98bff}
.usage-source-muse{--usage-accent:#e7ff58}
.usage-provider-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--usage-accent);background:#1a2031;color:var(--usage-accent)}
.usage-provider-icon img{display:block;width:26px;height:26px;object-fit:contain;filter:invert(1)}
.usage-source-codex .usage-provider-icon img{filter:none}
.usage-source-antigravity .usage-provider-icon img,.usage-source-muse .usage-provider-icon img{width:35px;height:35px;filter:none}
.usage-provider-name{display:block;font:800 12px/1.25 var(--mono);overflow-wrap:anywhere}
.usage-provider-state{display:block;margin-top:3px;font:700 9px/1.2 var(--mono);letter-spacing:.06em;color:var(--usage-accent)}
.usage-provider-count{display:grid;justify-items:end;gap:2px;white-space:nowrap}
.usage-provider-count strong{font:800 15px/1 var(--mono);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.usage-provider-count small{font:700 8px/1 var(--mono);letter-spacing:.08em;color:#8eabd0}
.usage-provider.is-pending .usage-provider-count strong{font-size:11px;color:#b6c5d3}
.usage-popover-foot{display:flex;justify-content:space-between;gap:8px;padding-top:11px;font:700 9px/1.25 var(--mono);color:#8eabd0}
.usage-interference{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}
.usage-interference span{position:absolute;left:-8%;width:116%;opacity:0;animation:usage-signal-tear .3s ease-out both}
.usage-interference span:nth-child(1){top:18%;height:4px;background:linear-gradient(90deg,transparent 2%,#00edff 9% 27%,#ff00b8 29% 61%,transparent 78%);animation-delay:.02s}
.usage-interference span:nth-child(2){top:48%;height:7px;background:linear-gradient(90deg,transparent 5%,#ff00b8 11% 37%,#e7ff58 39% 48%,#00edff 52% 83%,transparent 90%);animation-delay:.055s}
.usage-interference span:nth-child(3){top:79%;height:3px;background:linear-gradient(90deg,transparent 12%,#e7ff58 18% 25%,#00edff 28% 72%,#ff00b8 75% 90%,transparent 96%);animation-delay:.09s}
@keyframes usage-pop-in{from{opacity:0;transform:translate3d(0,-7px,0)}to{opacity:1;transform:none}}
@keyframes usage-signal-sweep{0%{opacity:0;transform:translate3d(0,-48%,0)}20%{opacity:.7}75%{opacity:.55}100%{opacity:0;transform:translate3d(0,48%,0)}}
@keyframes usage-signal-tear{0%{opacity:0;transform:translate3d(-18px,0,0)}25%{opacity:.7}70%{opacity:.45}100%{opacity:0;transform:translate3d(8px,0,0)}}
@keyframes usage-channel-pink{0%{opacity:0;transform:translate3d(8px,0,0)}25%{opacity:.85}65%{opacity:.4}100%{opacity:0;transform:none}}
@keyframes usage-channel-cyan{0%{opacity:0;transform:translate3d(-7px,0,0)}25%{opacity:.8}65%{opacity:.35}100%{opacity:0;transform:none}}
.site-header nav{display:flex;align-items:center;gap:12px}
.site-header nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 14px;font-size:14px;font-weight:700;white-space:nowrap;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .18s,box-shadow .18s,background .18s}
.site-header nav a:first-child{border-color:transparent;box-shadow:none}
.site-header nav a:hover,.site-header nav a:focus-visible{background:var(--ink);color:var(--lime)}
.site-header nav a:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

.hero{padding:24px clamp(20px,5vw,76px) 34px;overflow:hidden}
.hero-top{display:flex;justify-content:space-between;gap:20px;font:11px/1.4 var(--mono);letter-spacing:.02em}
.hero-stage{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(350px,.75fr);align-items:center;min-height:560px}
.hero-type{position:relative;z-index:1;align-self:center}
.hero-kicker{font-size:16px;font-weight:700;margin:2px 0 20px}
.hero h1{font-size:clamp(130px,19vw,280px);font-weight:900;line-height:.76;letter-spacing:-.095em}
.hero h1>span{display:block;white-space:nowrap}
.hero h1>span+span{margin-left:4%}
.question{color:var(--blue);-webkit-text-stroke:2px var(--ink);display:inline-block;transform:rotate(12deg)}

.collage{position:relative;z-index:2;height:540px;min-width:0;isolation:isolate}
.collage-image{position:absolute;width:95%;height:88%;left:1%;top:5%;object-fit:cover;opacity:.19;clip-path:polygon(4% 2%,97% 0,100% 91%,8% 100%,0 48%)}
.movable{position:absolute;transform:translate(var(--shift-x,0px),var(--shift-y,0px)) rotate(var(--tilt,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pink-note{z-index:3;right:13%;top:23px;width:240px;min-height:320px;padding:24px;background:var(--pink);box-shadow:8px 9px 0 var(--ink);display:flex;flex-direction:column}
.micro{font:11px/1.4 var(--mono);letter-spacing:.06em}
.pink-note strong{font-size:44px;line-height:1.08;letter-spacing:-.07em;margin:25px 0;white-space:nowrap}
.pink-note-foot{font:12px/1.35 var(--mono)}
.note-cross{position:absolute;right:16px;bottom:-8px;font-size:74px;line-height:1;font-weight:300}
.seed-seal{z-index:4;left:-14%;top:185px;width:164px;height:164px;display:grid;place-items:center}
.seed-seal img{position:absolute;width:100%;height:100%;object-fit:contain}
.seed-seal span{position:relative;font:900 12px/.95 var(--mono);text-align:center;letter-spacing:-.07em;transform:rotate(-8deg)}
.paper-note{z-index:5;right:5%;bottom:18px;width:235px;min-height:152px;padding:24px 18px 10px;background:#eeeae0;box-shadow:4px 6px 0 #20201933}
.paper-note p{font-size:17px;line-height:1.6}
.paper-note b{font-weight:900}
.tape{position:absolute;left:30%;top:-11px;width:96px;height:25px;background:#aaa88cab;transform:rotate(-5deg);clip-path:polygon(0 4%,98% 0,95% 25%,100% 55%,98% 100%,0 96%,3% 65%,0 35%)}
.hand-arrow{display:block;text-align:right;font-size:54px;line-height:.7}
.black-sticker{z-index:6;left:0;bottom:42px;width:90px;height:90px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-content:center;text-align:center;font:11px/1.3 var(--mono);outline:2px dashed var(--ink);outline-offset:5px}
.black-sticker strong{font:900 16px/1.3 Arial,sans-serif}

.hero-bottom{display:flex;align-items:end;justify-content:space-between;gap:24px;position:relative;z-index:7}
.hero-bottom>p{font-size:16px;line-height:1.6;font-weight:600}
.remix-group{display:flex;align-items:center;gap:16px}
.remix-group button{border:2px solid var(--ink);background:var(--ink);color:var(--lime);min-height:52px;padding:9px 17px;display:inline-flex;align-items:center;gap:22px;font-size:16px;font-weight:900;white-space:nowrap;box-shadow:4px 4px 0 var(--blue);transition:transform .18s,box-shadow .18s}
.remix-group button:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.remix-group button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--blue)}
.remix-group button span{font-size:24px;line-height:1}
.remix-status{min-width:90px;font:700 12px/1.3 var(--mono);white-space:nowrap}

.ticker{position:relative;overflow:hidden;background:var(--ink);color:var(--lime);padding:10px 0;transform:rotate(-1deg);font-size:clamp(25px,3.2vw,47px);font-weight:900;letter-spacing:-.05em;white-space:nowrap;contain:paint}
.ticker-track{display:flex;width:max-content;animation:ticker-slide 24s linear infinite;will-change:transform}
.ticker-track span{display:block;flex:none}
.ticker.is-hidden .ticker-track{animation-play-state:paused}
@keyframes ticker-slide{to{transform:translate3d(-50%,0,0)}}

.manifesto{padding:clamp(72px,8vw,130px) clamp(20px,6vw,90px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px)}
.manifesto h2{margin-top:26px;font-size:clamp(52px,6.7vw,105px);font-weight:900;line-height:1.12;letter-spacing:-.07em}
.manifesto h2 span{color:var(--blue);white-space:nowrap}
.statements article{display:grid;grid-template-columns:44px 1fr;gap:20px;align-items:start;padding:22px 0;border-bottom:2px solid var(--ink)}
.statements article:first-child{border-top:2px solid var(--ink)}
.statements article>span{font:12px/1.6 var(--mono)}
.statements p{font-size:clamp(20px,2vw,27px);line-height:1.5;font-weight:700;letter-spacing:-.04em}

.about{background:var(--pink);border-block:2px solid var(--ink);padding:76px clamp(20px,6vw,90px);display:flex;justify-content:space-between;align-items:end;gap:30px}
.about h2{font-size:clamp(40px,5vw,70px);letter-spacing:-.06em;margin:24px 0}
.about h2 em{font:italic .72em Georgia,'Songti SC',serif;white-space:nowrap;margin-left:12px}
.about p{max-width:580px;font-size:17px;line-height:1.75}
.about>a{min-height:48px;padding:12px 3px;white-space:nowrap;border-bottom:2px solid;font-size:16px;font-weight:700}
.about>a:hover,.site-footer a:hover{text-decoration:underline;text-underline-offset:5px}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:32px clamp(20px,6vw,90px) 48px;font:12px/1.4 var(--mono)}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font-weight:700;white-space:nowrap}

@media(max-width:950px){
.site-header{justify-content:space-between}
.usage-control{margin-left:auto}
.hero-stage{grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr);min-height:490px}
.hero h1{font-size:clamp(115px,18vw,190px)}
.collage{height:460px}
.pink-note{right:4%;width:205px;min-height:285px;padding:19px}
.pink-note strong{font-size:49px}
.seed-seal{width:135px;height:135px;left:-12%;top:155px}
.paper-note{right:0;width:210px;min-height:135px;padding:17px}
.paper-note p{font-size:15px}
.black-sticker{left:-3%;bottom:28px}
.manifesto{grid-template-columns:1fr;gap:30px}
.manifesto h2{font-size:clamp(55px,8vw,85px)}
.statements{max-width:650px}
}

@media(max-width:700px){.site-header{min-height:84px;padding:4px 6% 5px;gap:0 8px;flex-wrap:wrap;align-content:space-between}
.wordmark{font-size:26px;min-height:44px}
.usage-control{order:3;width:100%;margin-left:0}
.usage-control[data-open="true"]::before{width:100%;height:8px}
.usage-control[data-open="true"]::after{top:calc(100% - 1px)}
.header-usage{justify-content:flex-end;width:100%;min-height:44px;padding:10px 0 9px;border-top:1px solid var(--ink);border-bottom:0;gap:6px}
.header-usage>span:first-child{font-size:9px}
.header-usage strong{font-size:15px}
.header-usage>span:last-child{font-size:13px}
.usage-popover{top:calc(100% + 6px);right:0;width:100%;max-height:calc(100svh - 120px);padding:14px 14px 11px;box-shadow:4px 4px 0 #ff00b8,-2px -2px 0 #00edff}
.usage-popover-title{font-size:23px}
.usage-popover-total strong{font-size:20px}
.usage-provider{grid-template-columns:34px minmax(0,1fr);gap:3px 9px;min-height:56px}
.usage-provider-icon{grid-row:1/3;width:34px;height:34px}
.usage-provider-icon img{width:24px;height:24px}
.usage-source-antigravity .usage-provider-icon img,.usage-source-muse .usage-provider-icon img{width:31px;height:31px}
.usage-provider-count{grid-column:2;display:flex;align-items:baseline;gap:4px;justify-self:start}
.usage-provider-count strong{font-size:14px}
.usage-popover-foot{flex-wrap:wrap}
.site-header nav{gap:6px}
.site-header nav a{font-size:12px;padding:8px;min-height:44px}
.site-header nav a:first-child{display:inline-flex}
.hero{padding:18px 6% 32px}
.hero-top{font-size:10px}
.hero-top>span:last-child{display:none}
.hero-stage{display:block;min-height:0}
.hero-type{padding-top:28px}
.hero-kicker{font-size:15px;margin-bottom:12px}
.hero h1{font-size:clamp(100px,31vw,190px);letter-spacing:-.105em;line-height:.79}
.hero h1>span+span{margin-left:0}
.collage{height:285px;margin-top:7px}
.collage-image{left:6%;top:10px;width:90%;height:270px;opacity:.18}
.pink-note{top:4px;right:4%;width:45%;min-height:210px;padding:14px;box-shadow:5px 6px 0 var(--ink)}
.pink-note .micro{font-size:8px}
.pink-note strong{font-size:clamp(28px,8vw,38px);margin:10px 0}
.pink-note-foot{font-size:9px}
.note-cross{font-size:50px;right:9px;bottom:0}
.seed-seal{width:35%;height:auto;aspect-ratio:1;top:75px;left:0}
.seed-seal span{font-size:clamp(9px,2.8vw,12px)}
.paper-note{right:4%;bottom:7px;width:53%;min-height:106px;padding:15px 13px 7px}
.paper-note p{font-size:clamp(13px,3.6vw,16px);line-height:1.45}
.hand-arrow{font-size:36px}
.tape{width:70px;height:19px}
.black-sticker{left:4%;bottom:22px;width:73px;height:73px;font-size:9px}
.black-sticker strong{font-size:13px}
.hero-bottom{align-items:start;flex-direction:column;gap:16px}
.hero-bottom>p{font-size:15px}
.remix-group{width:100%;justify-content:space-between}
.remix-group button{min-height:50px;font-size:15px}
.remix-status{font-size:13px;min-width:0}
.ticker{font-size:29px}
.manifesto{padding:72px 6%;gap:36px}
.manifesto h2{font-size:clamp(52px,12vw,75px)}
.statements article{grid-template-columns:42px 1fr;gap:10px}
.statements p{font-size:21px}
.about{padding:68px 6%;display:block}
.about h2{font-size:42px}
.about h2 em{font-size:.72em;display:block;margin:7px 0 0}
.about p{font-size:16px}
.about>a{display:inline-flex;margin-top:24px}
.site-footer{padding:27px 6% 38px;flex-wrap:wrap;font-size:11px}
.site-footer>span:nth-child(2){order:3;width:100%}
}

@media(max-width:360px){.site-header{gap:4px}
.site-header nav{gap:0}
.site-header nav a{font-size:10px;padding:6px}
.wordmark{font-size:23px}
.hero h1{font-size:30vw}
.collage{height:275px}
.collage-image{height:260px}
.pink-note{min-height:198px}
.pink-note strong{font-size:28px}
.paper-note{width:52%;min-height:104px}
.paper-note p{font-size:12.5px}
.black-sticker{bottom:28px}
.hero-bottom>p{font-size:14px}
.remix-group button{gap:11px;padding:8px 11px}
.remix-status{font-size:12px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
}

/* First manifesto entry leads to the local Skill design exhibition. */
.skill-entry{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}.skill-entry-arrow{flex:none;font:10px var(--mono);padding:8px 0;border-bottom:1px solid currentColor;color:var(--blue)}.skill-entry:hover,.skill-entry:focus-visible{color:var(--blue)}
@media(max-width:360px){.skill-entry{gap:7px}.skill-entry-arrow{font-size:8px}}
