:root{--paper:#f4f3ed;--ink:#252923;--muted:#777b72;--green:#c8ef72}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}header,main,footer{max-width:1320px;margin:auto}header{height:100px;padding:0 48px;display:flex;align-items:center;gap:25px;border-bottom:1px solid #d4d6cc}header>a:last-child{margin-left:auto;font-size:12px}.logo{font-size:34px;font-weight:800;letter-spacing:-2px}.logo span{color:#6a8f39}.subtitle{font-size:10px;letter-spacing:2px;color:var(--muted)}main{padding:0 48px}.hero{position:relative;padding:66px 0 55px;border-bottom:1px solid #bfc3b6}.eyebrow{font-size:11px;letter-spacing:2px;display:flex;gap:8px;align-items:center}i{width:7px;height:7px;border-radius:50%;background:#729e3b}h1{font-size:clamp(64px,8.5vw,114px);line-height:1.14;letter-spacing:-7px;margin:32px 0 40px;font-weight:650}.serif{font-family:serif;font-weight:500}.asterisk{display:inline-block;font-size:100px;color:#7da54e;vertical-align:middle;margin-left:30px}.hero-bottom{display:flex;align-items:end;justify-content:space-between}.hero-bottom p{line-height:1.9;font-size:14px;margin:0}.explore{display:flex;gap:45px;font-size:13px;align-items:center}.explore span{display:grid;place-items:center;width:42px;height:42px;border:1px solid #a6ac99;border-radius:50%}.floating{position:absolute;right:45px;top:110px;width:210px;height:190px;background:var(--green);transform:rotate(8deg);padding:25px;box-shadow:8px 8px 0 #e4e7d8;display:flex;flex-direction:column;justify-content:space-between}.floating span{font-size:9px;letter-spacing:1px}.floating strong{font-size:32px;letter-spacing:-1.5px}#catalog{padding:50px 0 65px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:20px}h2{font-size:23px;font-weight:500;margin:0}.section-head h2 span{font-size:10px;margin-left:18px;color:var(--muted);letter-spacing:1px}.search{border-bottom:1px solid #b2b8aa;padding:9px 0;font-size:25px;display:flex;align-items:center;gap:10px}.search input{background:none;border:none;outline:none;width:190px;font-size:12px}.search:focus-within{border-color:#252923}.filters{display:flex;gap:8px;margin:28px 0}.filters button{border:1px solid #ccd0c3;background:none;border-radius:30px;padding:9px 20px;font-size:12px}.filters button.active{background:var(--ink);border-color:var(--ink);color:white}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 20px}.card{border:0;padding:0;text-align:left;color:var(--ink);background:none}.preview{height:210px;overflow:hidden;position:relative;border:1px solid #d9dccf;display:grid;place-items:center;transition:transform .25s}.card:hover .preview{transform:translateY(-4px)}.card:focus-visible{outline:2px solid #6b8f37;outline-offset:6px}.card-meta{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:var(--muted);margin:17px 0 9px}.card>h3{font-size:19px;font-weight:500;margin:0 0 8px}.card>p{font-size:12px;line-height:1.8;margin:0;color:#777b72}.about{background:#e6ebdd;margin-bottom:50px;padding:48px;text-align:center}.about>span{font-size:10px;letter-spacing:2px;color:#78816d}.about h2{font-size:36px;line-height:1.5;margin:24px 0}.about p{font-size:13px;line-height:2.2;color:#69705f}.about a{display:inline-block;margin-top:14px;font-size:12px;border-bottom:1px solid;padding-bottom:8px}footer{padding:0 48px 34px;display:flex;gap:24px;align-items:center;font-size:10px;color:#7a8070}footer .logo{color:var(--ink);font-size:25px}footer>span:last-child{margin-left:auto}dialog{width:min(570px,90vw);border:1px solid #a6ae98;background:var(--paper);padding:45px;color:var(--ink)}dialog::backdrop{background:transparent}.close{position:absolute;right:15px;top:10px;font-size:28px;border:none;background:none}dialog h2{font-size:28px;margin:20px 0}dialog p,blockquote{font-size:13px;line-height:1.9}dialog h3{font-size:12px;margin-top:25px}blockquote{margin:12px 0;padding:17px;background:#e6ebdd}.copy{background:var(--ink);color:#fff;border:0;padding:15px;width:100%;font-size:12px}.note{color:var(--muted);font-size:10px!important}button:hover{filter:brightness(.97)}@media(max-width:800px){header{padding:0 22px;height:80px}.subtitle{display:none}main{padding:0 22px}.hero{padding-top:40px}h1{letter-spacing:-4px;font-size:76px}.asterisk{font-size:60px;margin-left:8px}.floating{right:10px;top:60px;width:135px;height:135px;padding:15px}.floating strong{font-size:23px}.floating span{font-size:7px}.grid{grid-template-columns:repeat(2,1fr);gap:25px 16px}.preview{height:180px}.section-head{align-items:start;flex-direction:column}.about{padding:30px 15px}.about h2{font-size:27px}footer{padding:0 22px 25px}footer>span:last-child{display:none}}@media(max-width:500px){h1{font-size:65px}.floating{top:85px;width:100px;height:110px;right:4px;padding:12px}.floating strong{font-size:17px}.floating span:last-child{display:none}.asterisk{display:none}.hero-bottom{align-items:start;gap:22px;flex-direction:column}.hero-bottom p{font-size:12px}.grid{grid-template-columns:1fr}.preview{height:230px}.filters{gap:5px;flex-wrap:wrap}.filters button{padding:8px 15px}.section-head h2{font-size:21px}.about p br{display:none}dialog{padding:32px 25px}}
/* Shared component overlay */
html:has(#detail[open]){overflow:hidden}#detail{max-width:none;max-height:none;width:100%;height:100%;margin:0;border:0;padding:0;overflow:auto;background:var(--paper);overscroll-behavior:contain}.overlay-bar{height:68px;padding:0 32px;display:flex;gap:24px;align-items:center;border-bottom:1px solid #d5d9ca;background:var(--paper);position:sticky;top:0;z-index:2;font-size:10px;letter-spacing:1px}.overlay-bar .close{position:static;font-size:12px;border:1px solid #bac2ad;border-radius:30px;padding:9px 16px;color:var(--ink)}.demo-label{margin-left:auto;color:#777e70}#demo-surface{min-height:calc(100dvh - 68px);padding:45px max(24px,calc((100vw - 1160px)/2));background:var(--demo-bg);color:#263128}#demo-content{max-width:1160px;margin:auto}.demo-nav{display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;border-bottom:1px solid #26312833;padding-bottom:20px}.demo-hero{padding:55px 0 40px;display:flex;align-items:center;justify-content:space-between;gap:30px}.demo-hero h2{font-family:Georgia,serif;font-size:clamp(40px,6vw,82px);line-height:1.05;letter-spacing:-2px;margin:10px 0 20px;max-width:800px}.demo-hero p{max-width:620px;font-size:14px}.demo-symbol{font-size:110px;color:var(--demo-accent)}.demo-kicker{font-size:10px;letter-spacing:2px}.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.demo-tile{padding:25px;background:#ffffff8a;border:1px solid #26312818;border-radius:5px}.demo-tile h3{font-size:19px;margin:10px 0;font-weight:500}.demo-tile p{font-size:12px;margin:0}.demo-art{height:115px;background:var(--demo-accent);display:grid;place-items:center;font-size:55px;margin-bottom:20px;color:#fff}.demo-btn{border:0;border-radius:4px;background:#263128;color:white;padding:13px 22px;font-size:12px}.demo-btn.secondary{background:#ffffffaa;color:#263128}.demo-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:15px 0}.demo-input{padding:12px;background:#fff9;border:1px solid #26312844;border-radius:3px;font-size:14px;max-width:100%;color:#263128}.demo-check{display:flex;gap:15px;align-items:center;font-size:16px;padding:16px;border-bottom:1px solid #26312822}.demo-check input{accent-color:var(--demo-accent);width:22px;height:22px}.demo-check:has(:checked){text-decoration:line-through;color:#687660}.demo-result{font-size:42px;margin:25px 0!important}.demo-list{margin:0;padding:0;list-style:none}.demo-list li{padding:15px 0;border-bottom:1px solid #26312822;font-size:14px}.idea-notes{max-width:1160px;margin:auto;padding:55px 30px;display:grid;grid-template-columns:1fr 1fr;gap:60px}.idea-notes h2{font-size:24px}#detail .note{margin-top:12px}.demo-game{width:100%;height:180px;position:relative;background:#fff6;border-radius:5px;margin:18px 0}.target{position:absolute;border:0;background:var(--demo-accent);color:#fff;border-radius:50%;width:55px;height:55px;font-size:24px;left:45%;top:35%}.demo-feedback{min-height:30px}::view-transition-group(site-example){animation-duration:340ms;animation-timing-function:cubic-bezier(.22,.8,.2,1)}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}::view-transition-group(*){animation-duration:0.01ms!important}.preview{transition:none}}@media(max-width:700px){.overlay-bar{padding:0 15px;gap:10px}.demo-label{font-size:8px;letter-spacing:0}.overlay-bar #dialog-cat{display:none}#demo-surface{padding:30px 20px}.demo-hero{padding:35px 0 25px}.demo-symbol{font-size:65px}.demo-grid{grid-template-columns:1fr}.demo-art{height:100px}.idea-notes{grid-template-columns:1fr;gap:20px;padding:35px 22px}}
/* A single live site surface is scaled in the catalog and moved into the dialog. */
html{scrollbar-gutter:stable}.card{position:relative;min-width:0}.card-open{position:absolute;inset:0;border:0;background:transparent;border-radius:4px;z-index:1}.card-open:focus-visible{outline:2px solid #6b8f37;outline-offset:6px}.card-open:hover{filter:none}.card .preview{display:block;position:relative;width:100%;min-width:0;height:auto;aspect-ratio:960/680;border:0;border-radius:7px;transition:box-shadow .2s}.card:hover .preview{transform:none;box-shadow:0 8px 24px #28351e1c}.card.is-expanded .preview{box-shadow:inset 0 0 0 1px #26312820}.preview>.example-site{position:absolute;left:0;top:0;width:960px;transform:scale(var(--preview-scale, .3));transform-origin:0 0;pointer-events:none;height:680px;overflow:hidden}.example-site{background:var(--demo-bg);color:#263128;padding:40px;min-height:680px;container-type:inline-size}.example-site .demo-nav{font-size:11px}.example-site .demo-hero{padding:48px 0 36px}.example-site .demo-hero h2{font-family:Georgia,serif;font-size:72px;line-height:1.05;letter-spacing:-2px;margin:10px 0 20px;font-weight:500}.example-site p{font-size:13px;line-height:1.9;color:#263128;margin:12px 0}.example-site .demo-hero p{font-size:14px;max-width:620px}.example-site .demo-tile h3{font-size:19px;margin:10px 0;font-weight:500}.example-site .demo-tile p{font-size:12px;margin:0}.example-site .demo-result{font-size:42px}.example-site .demo-symbol{font-size:110px}.example-site .demo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.example-site .demo-art{height:115px}.example-site .demo-input{min-width:0}.example-site .demo-body{position:relative}.example-site .demo-kicker{font-size:10px}#detail{--overlay-gap:clamp(18px,3.2vw,48px);inset:var(--overlay-gap);width:calc(100% - 2 * var(--overlay-gap));height:calc(100% - 2 * var(--overlay-gap));max-width:1440px;max-height:calc(100% - 2 * var(--overlay-gap));margin:auto;border:1px solid #ffffff66;border-radius:16px;box-shadow:0 30px 100px #10190c66;scrollbar-width:thin}#detail::backdrop{background:transparent;backdrop-filter:none;animation:none}#demo-surface{padding:0;min-height:0;background:transparent}#demo-content{max-width:none;margin:0}#detail .example-site{width:100%;min-height:calc(100dvh - 2 * var(--overlay-gap) - 62px);padding:40px clamp(24px,4vw,64px);border-radius:0}.overlay-bar{height:62px;padding:0 25px}.overlay-bar .close{background:#ffffff80}.idea-notes{border-top:1px solid #26312820}.preview .example-site [hidden]{display:none}
::view-transition-group(site-example),::view-transition-group(example-nav),::view-transition-group(example-title),::view-transition-group(example-symbol),::view-transition-group(example-body){animation-duration:420ms;animation-timing-function:cubic-bezier(.22,.8,.2,1)}::view-transition-old(example-nav),::view-transition-new(example-nav),::view-transition-old(example-title),::view-transition-new(example-title),::view-transition-old(example-symbol),::view-transition-new(example-symbol),::view-transition-old(example-body),::view-transition-new(example-body){height:100%;object-fit:fill;mix-blend-mode:normal}@container (max-width:600px){.example-site .demo-hero h2{font-size:42px;letter-spacing:-1px}.example-site .demo-hero{padding:30px 0 24px;gap:15px}.example-site .demo-symbol{font-size:60px}.example-site .demo-grid{grid-template-columns:1fr}.example-site .demo-nav{font-size:9px;letter-spacing:1px}}@media(max-width:700px){#detail{--overlay-gap:12px;border-radius:12px}#detail .example-site{padding:28px 22px}.overlay-bar{padding:0 14px}.overlay-bar .close{padding:8px 12px}.demo-label{font-size:8px}.idea-notes{padding:30px 22px}}@media(prefers-reduced-motion:reduce){#detail::backdrop{animation:none}::view-transition-group(*){animation-duration:.01ms!important}}

/* Only the selected component enters normal document flow in the overlay. */
#detail .example-site{position:relative;transform:none;height:auto}
@media(min-width:801px) and (max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.grid{gap:22px 12px}.card>h3{font-size:15px}.card>p{font-size:11px}.card-meta{font-size:8px}.card-meta>span:last-child{display:none}}

/* Keep the animation's content inside the same visible frame throughout. */
.card .preview,#detail{view-transition-group:contain}

@supports (view-transition-group:contain){
  ::view-transition-group-children(site-example){overflow:clip}
}

/* The scrim stays in the page capture, separate from the morphing dialog.
   No independently running opacity animation can finish behind a frozen snapshot. */
html{background:var(--paper)}
#overlay-scrim{position:fixed;inset:0;z-index:10;pointer-events:none;background:#17201580;backdrop-filter:blur(5px);opacity:1;view-transition-name:none}
#overlay-scrim[hidden]{display:none}



/* Only the selected card/dialog is captured. Background and scrim remain live. */
:root{view-transition-name:none}
::view-transition-old(site-example),::view-transition-new(site-example){mix-blend-mode:normal}

/* Filter transitions are scoped to cards and the content that moves below them.
   The page background remains live, just as it does for the detail overlay. */
html[data-catalog-transition] .card{view-transition-name:var(--card-transition)}
html[data-catalog-transition] #about{view-transition-name:catalog-about}
html[data-catalog-transition] footer{view-transition-name:catalog-footer}
html[data-catalog-transition] #empty{view-transition-name:catalog-empty}
html[data-catalog-transition]::view-transition{pointer-events:none}
html[data-catalog-transition]::view-transition-group(*){animation-duration:340ms;animation-timing-function:cubic-bezier(.22,.8,.2,1);pointer-events:none}
html[data-catalog-transition]::view-transition-old(*){animation:none;opacity:0;mix-blend-mode:normal}
html[data-catalog-transition]::view-transition-new(*){animation:none;mix-blend-mode:normal}
html[data-catalog-transition]::view-transition-old(*):only-child{animation:catalog-out 160ms ease-in both}
html[data-catalog-transition]::view-transition-new(*):only-child{animation:catalog-in 280ms cubic-bezier(.22,.8,.2,1) both}
@keyframes catalog-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(5px) scale(.97)}}
@keyframes catalog-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.filters button{transition:background-color .18s,color .18s,border-color .18s}
@media(prefers-reduced-motion:reduce){.filters button{transition:none}}