@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700;800;900&family=Pixelify+Sans:wght@500;600;700&family=Michroma&display=swap');
:root{--bg:#f7f7f4;--panel:#ffffff;--panel2:#e9ece8;--ink:#171b1a;--muted:#6b7370;--subtle:#818984;--line:#dedfda;--line2:#e7e8e2;--accent:#245e57;--toast:#171b1a;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.55 Inter,-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;transition:background .18s,color .18s}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}button{border:0}.view[hidden],.viewer[hidden],[hidden]{display:none!important}::selection{background:var(--ink);color:var(--bg)}.site-tools{position:fixed;top:29px;right:42px;z-index:20;display:flex;gap:15px;align-items:center}.tool-btn{border:0;background:transparent;color:var(--ink);font:600 11px 'IBM Plex Mono',monospace;letter-spacing:.03em;padding:8px 0}.theme-btn{font-size:24px;line-height:.65;opacity:.74}.dot-word{display:block;margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-weight:900;letter-spacing:-.075em;line-height:.95;white-space:nowrap;text-transform:uppercase;background-image:radial-gradient(circle at 50% 50%,var(--ink) 41%,transparent 45%);background-size:9px 9px;background-position:1px 0;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;user-select:none}.mono,.home-sub,.entry-bar,.preview-caption,.term-row,.term-progress,.entry-rule,.home-footer,.section-top,.gallery-count,.filter-tabs,.toolbar-actions,.gallery-footer,.card-number,.card-ratio,.card-copy,.viewer-top,.viewer-index,.viewer-spec,.secondary-actions,.prompt-reveal,.viewer-hint,.guide-lead>span,.step-no,.stage-caption,.toast{font-family:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace}
.home-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:65px 30px 26px}.home-shell{width:min(1070px,100%)}.home-heading{text-align:center;padding-top:12px}.home-word{font-size:clamp(100px,14.7vw,206px);line-height:.93;letter-spacing:-.058em}.home-sub{font-size:10px;color:var(--subtle);display:flex;gap:16px;justify-content:center;letter-spacing:.16em;margin-top:14px;margin-bottom:40px}.entry-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.entry-card{border:1px dotted #8a8a82;border-radius:13px;padding:13px 15px 12px;display:flex;flex-direction:column;min-height:450px;background:var(--panel);transition:transform .2s,border-color .2s,background .2s;outline-offset:6px}.entry-card:hover{transform:translateY(-4px);border-color:var(--ink);background:var(--panel2)}.entry-bar{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);letter-spacing:.06em;padding:0 0 12px}.led{display:inline-block;width:6px;height:6px;border-radius:2px;margin-left:8px;background:var(--accent);box-shadow:0 0 8px #90c66b55}.entry-preview{height:194px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--bg);flex-shrink:0}.preview-images{display:flex;gap:5px;padding:5px;align-items:stretch}.preview-tile{flex:1;min-width:0;background-position:center;background-size:cover;filter:grayscale(1) contrast(1.2);opacity:.82}.preview-tile:nth-child(2){background-position:45% center}.preview-tile:nth-child(3){background-position:65% center}.preview-images:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 42%,var(--bg) 47%);background-size:7px 7px;opacity:.44}.preview-caption{position:absolute;bottom:7px;left:8px;z-index:1;font-size:10px;letter-spacing:.08em;background:var(--bg);color:var(--muted);padding:2px 5px}.preview-terminal{padding:16px 14px}.term-row{display:flex;justify-content:space-between;font-size:10px;padding:9px 0;border-bottom:1px solid var(--line2);color:var(--muted)}.term-row strong{font-weight:400;color:var(--ink)}.term-progress{font-size:10px;display:flex;justify-content:space-between;margin-top:15px;color:var(--accent)}.term-progress span:first-child{letter-spacing:-1.7px;color:var(--ink)}.preview-saved{display:flex;justify-content:center;align-items:center;gap:30px}.big-star{font-size:100px;color:var(--subtle);line-height:1}.saved-number{font:500 52px/.9 'IBM Plex Mono',monospace;color:var(--ink)}.entry-card h2{font:600 36px/.95 Inter,sans-serif;letter-spacing:-.06em;margin:21px 0 9px}.entry-card p{font-size:12px;line-height:1.8;color:var(--muted);margin:0 0 16px;min-height:43px}.entry-rule{border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.01em;color:var(--muted);padding:10px 0 0}.entry-rule.last{border:0;margin-top:auto;padding-top:17px}.entry-rule.last span:last-child{color:var(--ink)}.home-footer{display:flex;justify-content:space-between;color:var(--subtle);letter-spacing:.06em;font-size:10px;margin-top:30px}.gallery-view,.guide-view{min-height:100vh;padding:30px 48px 65px}.section-top{display:flex;align-items:center;justify-content:space-between;color:var(--subtle);font-size:10px;letter-spacing:.08em;margin:0 0 49px}.back-link{display:flex;align-items:center;gap:8px;color:var(--ink)}.back-link:first-letter{font-size:17px}.gallery-head{position:relative;display:flex;align-items:flex-end;gap:22px}.gallery-word{font-size:clamp(130px,17.6vw,260px);letter-spacing:-.072em;flex:1;line-height:.9}.gallery-count{position:relative;bottom:10px;display:flex;flex-direction:column;gap:2px;color:var(--muted)}.gallery-count>span{font-size:24px}.gallery-count small{font-size:9px;letter-spacing:.1em}.gallery-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:37px;margin-bottom:22px;min-height:32px}.filter-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.filter-tabs button{background:none;border-bottom:2px solid transparent;color:var(--subtle);font-size:10px;letter-spacing:.03em;padding:9px 0 9px;white-space:nowrap}.filter-tabs button:hover,.filter-tabs button.active{color:var(--ink)}.filter-tabs button.active{border-color:var(--ink)}.filter-tabs .count{font-size:8px;color:var(--subtle);padding-left:4px}.toolbar-actions{display:flex;align-items:center;gap:8px;color:var(--subtle)}.vertical-line{width:1px;background:var(--line);height:18px;margin:0 8px}.icon-btn{color:var(--subtle);padding:4px 6px;background:none;font-size:16px;line-height:1}.icon-btn.active,.icon-btn:hover{color:var(--ink)}.size-buttons{display:flex;gap:8px}.size-buttons button{font:11px 'IBM Plex Mono',monospace;background:transparent;color:var(--subtle);padding:4px 2px;border-bottom:2px solid transparent}.size-buttons button.active{color:var(--ink);border-color:var(--ink)}.search-box{display:flex;align-items:center;gap:4px}.search-input{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:4px;outline:0;width:0;padding:0;opacity:0;transition:width .2s,padding .2s,opacity .2s}.search-box.open .search-input,.search-input:focus{width:152px;padding:6px 8px;opacity:1}.gallery-grid{column-gap:16px}.gallery-grid.masonry.size-s{columns:6}.gallery-grid.masonry.size-m{columns:5}.gallery-grid.masonry.size-l{columns:4}.gallery-grid.grid{display:grid;align-items:start;gap:16px}.gallery-grid.grid.size-s{grid-template-columns:repeat(6,minmax(0,1fr))}.gallery-grid.grid.size-m{grid-template-columns:repeat(5,minmax(0,1fr))}.gallery-grid.grid.size-l{grid-template-columns:repeat(4,minmax(0,1fr))}.prompt-card{display:block;position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--line2);margin:0 0 16px;break-inside:avoid;background:var(--panel);isolation:isolate}.gallery-grid.grid .prompt-card{margin:0}.prompt-card img{width:100%;height:auto;display:block;transition:transform .3s ease;object-fit:cover;cursor:pointer}.gallery-grid.grid .prompt-card img{aspect-ratio:3/4}.prompt-card:hover img{transform:scale(1.035)}.card-cover{display:block;width:100%;border:0;background:none;padding:0;text-align:left;color:var(--ink)}.card-number{position:absolute;left:8px;top:9px;padding:3px 5px;background:rgba(5,5,5,.72);color:#ddd;font-size:10px;letter-spacing:.04em;pointer-events:none;border-radius:2px}.card-bottom{position:absolute;inset:auto 7px 7px;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;pointer-events:none}.card-ratio{padding:5px 7px;background:rgba(7,7,7,.76);color:#eee;font-size:9px;letter-spacing:.07em;border-radius:3px}.card-copy{pointer-events:auto;font:10px 'IBM Plex Mono',monospace;letter-spacing:.06em;background:#efefed;color:#161616;border-radius:5px;padding:7px 10px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}.prompt-card:hover .card-copy,.prompt-card:focus-within .card-copy{opacity:1;transform:translateY(0)}.card-copy:hover{background:#fff}.card-title-overlay{position:absolute;left:0;right:0;bottom:0;padding:45px 12px 44px;font-size:12px;font-weight:500;letter-spacing:.01em;color:#fff;text-shadow:0 1px 4px #000;background:linear-gradient(transparent,rgba(0,0,0,.63));opacity:0;pointer-events:none;transition:opacity .2s}.prompt-card:hover .card-title-overlay,.prompt-card:focus-within .card-title-overlay{opacity:1}.gallery-footer{display:flex;gap:20px;justify-content:space-between;border-top:1px solid var(--line);margin-top:45px;padding-top:18px;color:var(--subtle);font-size:10px;letter-spacing:.03em}.gallery-footer a:hover{color:var(--ink)}.empty-state{text-align:center;padding:90px 0;color:var(--muted)}.empty-state>div{font-size:66px}.empty-state button{background:transparent;color:var(--ink);border-bottom:1px solid var(--ink);font:11px 'IBM Plex Mono',monospace;padding:8px}.viewer{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 360px;background:var(--bg);z-index:100}.viewer-stage{min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:40px 35px 44px;background:#0b0b0b}.viewer-stage img{max-width:min(85%,900px);max-height:calc(100vh - 80px);width:auto;height:auto;object-fit:contain;display:block;border-radius:8px;box-shadow:0 10px 30px #0002}.stage-caption{position:absolute;bottom:15px;left:30px;right:30px;display:flex;justify-content:space-between;gap:20px;color:#81817e;font-size:9px;text-transform:uppercase;letter-spacing:.07em}.viewer-panel{border-left:1px solid var(--line);padding:27px 31px 24px;overflow-y:auto;max-height:100vh;background:var(--bg)}.viewer-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--subtle);letter-spacing:.1em}.viewer-nav{display:flex;align-items:center;gap:9px}.viewer-nav button{font:22px Inter;background:transparent;color:var(--muted);padding:0 7px}.viewer-nav button:hover{color:var(--ink)}.viewer-index{font-size:82px;line-height:1;letter-spacing:-.05em;margin:13px 0 9px;background-size:6px 6px}.scale-ruler{height:11px;margin:0 0 26px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px) left 4px /100% 6px no-repeat;border-top:1px solid var(--line)}.viewer-panel h2{font-size:17px;line-height:1.5;letter-spacing:-.03em;margin:0 0 9px}.viewer-panel>p:not(.viewer-hint){font-size:12px;color:var(--muted);line-height:1.8;margin:0 0 26px}.viewer-spec{border-top:1px solid var(--line);padding:10px 0 18px}.viewer-spec>div{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);margin:12px 0;gap:10px}.viewer-spec>div span:first-child{letter-spacing:.07em}.viewer-spec>div span:last-child{color:var(--ink);text-align:right}.copy-main{width:100%;background:#ebebe8;color:#131313;border-radius:5px;font:600 12px 'IBM Plex Mono',monospace;display:flex;justify-content:space-between;align-items:center;padding:18px 17px;transition:background .2s}.copy-main:hover{background:#fff}.secondary-actions{display:flex;align-items:center;gap:8px;margin-top:10px}.secondary-actions button,.secondary-actions a{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:12px 10px;text-align:center;font-size:10px;flex:1}.secondary-actions>*:hover{border-color:var(--muted)}.prompt-reveal{background:transparent;color:var(--muted);border-bottom:1px solid var(--line);width:100%;text-align:left;margin:25px 0 0;padding:12px 2px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.03em}.prompt-reveal[aria-expanded=true]{color:var(--ink)}.prompt-body{padding:12px 2px}.prompt-body pre{font:12px/1.9 'IBM Plex Mono','Hiragino Kaku Gothic ProN',monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);margin:0 0 14px}.prompt-body button{font:11px 'IBM Plex Mono',monospace;background:var(--panel2);color:var(--ink);padding:9px 12px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--toast);color:var(--bg);font-size:11px;padding:11px 17px;border-radius:5px;z-index:200;opacity:0;pointer-events:none;transition:transform .2s,opacity .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}.guide-word{font-size:clamp(145px,22vw,315px)}.guide-lead{display:flex;gap:50px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--line);padding:27px 0 45px}.guide-lead>span{font-size:10px;color:var(--muted);flex-shrink:0}.guide-lead p{font-size:22px;max-width:620px;line-height:1.65;letter-spacing:-.04em;margin:0}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:45px}.steps article{padding:20px 0}.step-no{font-size:11px;color:var(--muted)}.steps h2{font-size:23px;letter-spacing:-.05em;margin:26px 0 8px}.steps p{font-size:12px;line-height:1.9;color:var(--muted);min-height:74px}.steps img,.step-prompt{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;margin-top:22px;background:var(--panel)}.step-prompt{display:flex;align-items:center;padding:25px;font:700 45px/.95 'IBM Plex Mono',monospace;letter-spacing:-.09em}.guide-cta{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:var(--bg);padding:21px;font:12px 'IBM Plex Mono',monospace;margin-top:50px}.guide-cta:hover{opacity:.84}
@media(max-width:1100px){.home-word{font-size:clamp(90px,14.5vw,180px)}.entry-cards{gap:15px}.entry-card{min-height:435px}.gallery-view,.guide-view{padding:34px 32px}.gallery-word{font-size:18vw}.gallery-grid.masonry.size-s{columns:5}.gallery-grid.masonry.size-m{columns:4}.gallery-grid.masonry.size-l{columns:3}.gallery-grid.grid.size-s{grid-template-columns:repeat(5,minmax(0,1fr))}.gallery-grid.grid.size-m{grid-template-columns:repeat(4,minmax(0,1fr))}.gallery-grid.grid.size-l{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.site-tools{top:12px;right:18px}.home-view{padding:60px 19px 25px;align-items:flex-start}.home-shell{width:100%}.home-heading{padding-top:38px}.home-word{font-size:clamp(72px,17.5vw,130px)}.home-sub{font-size:8px;letter-spacing:.06em;gap:8px;margin:11px 0 32px}.entry-cards{grid-template-columns:1fr;gap:15px;max-width:500px;margin:auto}.entry-card{min-height:0;padding:12px}.entry-preview{height:156px}.entry-card h2{margin:14px 0 7px;font-size:31px}.entry-card p{min-height:0;margin-bottom:14px}.entry-rule.last{padding-top:12px}.home-footer{gap:8px;font-size:8px}.gallery-view,.guide-view{padding:70px 18px 50px}.section-top{margin-bottom:27px}.gallery-head{gap:6px}.gallery-word{font-size:clamp(84px,17vw,148px)}.gallery-count{bottom:2px}.gallery-count>span{font-size:15px}.gallery-count small{font-size:8px}.gallery-toolbar{align-items:flex-start;flex-direction:column;margin-top:25px;margin-bottom:15px;gap:5px}.filter-tabs{gap:12px;flex-wrap:nowrap;overflow:auto;width:100%;scrollbar-width:none}.filter-tabs button{font-size:10px}.toolbar-actions{align-self:flex-end}.gallery-grid.masonry.size-s{columns:3}.gallery-grid.masonry.size-m{columns:2}.gallery-grid.masonry.size-l{columns:1}.gallery-grid.grid.size-s{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery-grid.grid.size-m{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-grid.grid.size-l{grid-template-columns:1fr}.gallery-grid{column-gap:10px}.gallery-grid.grid{gap:10px}.prompt-card{margin-bottom:10px;border-radius:5px}.card-copy{opacity:1;transform:none;padding:5px 7px;font-size:9px}.card-title-overlay{display:none}.gallery-footer{font-size:8px;gap:12px;flex-wrap:wrap}.viewer{display:flex;flex-direction:column}.viewer-stage{height:48vh;flex:0 0 48vh;padding:20px 10px 25px}.viewer-stage img{max-height:calc(48vh - 50px);max-width:94%}.stage-caption{font-size:8px;left:14px;right:14px;bottom:8px}.viewer-panel{border-left:0;border-top:1px solid var(--line);max-height:52vh;flex:1;min-height:0;padding:18px 20px 35px}.viewer-index{font-size:56px;margin:2px 0}.viewer-panel h2{font-size:16px}.viewer-panel>p:not(.viewer-hint){margin-bottom:15px}.viewer-spec{padding:0 0 12px}.viewer-spec>div{margin:9px 0}.scale-ruler{margin-bottom:12px}.copy-main{padding:15px}.prompt-reveal{margin-top:15px}.guide-word{font-size:clamp(115px,24vw,210px)}.guide-lead{display:block;padding:15px 0 28px}.guide-lead p{font-size:17px;margin-top:14px}.steps{grid-template-columns:1fr;gap:0;margin-top:14px}.steps article{padding:15px 0 20px;border-bottom:1px solid var(--line)}.steps h2{margin:12px 0 7px}.steps p{min-height:0}.steps img,.step-prompt{margin-top:15px;max-height:360px}.guide-cta{margin-top:26px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* Row-major masonry: numbered results run from left to right, like the reference. */
.gallery-grid.masonry{display:grid;grid-template-columns:repeat(var(--lane-count,5),minmax(0,1fr));gap:16px;columns:auto;column-count:auto}.gallery-column{display:flex;flex-direction:column;min-width:0;gap:16px}.gallery-grid.masonry .prompt-card{margin:0}@media(max-width:760px){.gallery-grid.masonry,.gallery-column{gap:10px}}

/* Motion system — restrained, spatial, and responsive to user input. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-fast:240ms;--motion-mid:520ms}
@keyframes dot-reveal{from{clip-path:inset(0 100% 0 0);filter:brightness(1.5)}to{clip-path:inset(0 0 0 0);filter:brightness(1)}}
@keyframes content-rise{from{opacity:0;transform:translate3d(0,25px,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes line-grow{from{transform:scaleX(.05);opacity:.1}to{transform:scaleX(1);opacity:1}}
@keyframes led-breathe{0%,100%{opacity:.82;box-shadow:0 0 0 0 transparent}50%{opacity:1;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}}
@keyframes tile-scan{0%{transform:translateX(-180%) rotate(15deg)}100%{transform:translateX(320%) rotate(15deg)}}
@keyframes chip-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes image-next{from{opacity:.15;transform:translate3d(18px,0,0) scale(.97);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes panel-item-rise{from{opacity:.1;transform:translate3d(0,14px,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes root-out{to{opacity:0;transform:translate3d(0,-14px,0);filter:blur(2px)}}
@keyframes root-in{from{opacity:0;transform:translate3d(0,18px,0);filter:blur(2px)}to{opacity:1;transform:none;filter:blur(0)}}
::view-transition-old(root){animation:root-out 230ms ease both}
::view-transition-new(root){animation:root-in 490ms var(--motion-ease) both}
.view.is-entering .dot-word{animation:dot-reveal 960ms var(--motion-ease) both}
.view.is-entering .section-top,.view.is-entering .home-sub,.view.is-entering .guide-lead{animation:content-rise 540ms var(--motion-ease) both}
.view.is-entering .gallery-toolbar{animation:content-rise 520ms var(--motion-ease) 120ms both}
.view.is-entering .entry-card{animation:content-rise 720ms var(--motion-ease) both;animation-delay:calc(90ms + var(--card-order,0)*100ms)}
.entry-card:nth-child(1){--card-order:0}.entry-card:nth-child(2){--card-order:1}.entry-card:nth-child(3){--card-order:2}
.view.is-entering .steps article{animation:content-rise 720ms var(--motion-ease) both;animation-delay:calc(80ms + var(--card-order,0)*90ms)}
.steps article:nth-child(1){--card-order:0}.steps article:nth-child(2){--card-order:1}.steps article:nth-child(3){--card-order:2}
.view.is-entering .entry-card .entry-meta{animation:line-grow 480ms var(--motion-ease) .4s both}
.gallery-grid .prompt-card.is-appearing{animation:content-rise 620ms var(--motion-ease) both;animation-delay:var(--stagger,0ms)}
.filter-tabs button{transition:color 260ms ease,opacity 260ms ease,border-color 300ms ease}
.filter-tabs button:active,.size-buttons button:active,.icon-btn:active{transform:translateY(1px)}
.entry-preview:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent 39%,color-mix(in srgb,var(--ink) 8%,transparent) 50%,transparent 61%);width:80%;transform:translateX(-180%) rotate(15deg)}
.entry-card:hover .entry-preview:before{animation:tile-scan 800ms ease-out both}
.entry-card:hover .preview-tile{filter:grayscale(.35) contrast(1.04);opacity:1;transform:scale(1.045)}
.preview-tile{transition:filter 650ms var(--motion-ease),opacity 450ms ease,transform 900ms var(--motion-ease)}
.entry-card{transition:transform 560ms var(--motion-ease),border-color 350ms ease,background 350ms ease,box-shadow 560ms ease}
.entry-card:hover{transform:translateY(-7px);box-shadow:0 20px 40px #0004}
.entry-card:hover .entry-rule.last span:last-child{transform:translateX(4px)}
.entry-rule.last span:last-child{display:inline-block;transition:transform 460ms var(--motion-ease)}
.led{animation:led-breathe 2.8s ease-in-out infinite}
.preview-saved .big-star{transition:transform 600ms var(--motion-ease),color 350ms ease}
.entry-card:hover .big-star{transform:rotate(-13deg) scale(1.11);color:var(--ink)}
.prompt-card{transition:border-color 380ms ease,box-shadow 380ms ease,transform 460ms var(--motion-ease)}
.prompt-card:hover{transform:translateY(-4px);border-color:var(--muted);box-shadow:0 13px 27px #0005}
.prompt-card img{transition:transform 850ms var(--motion-ease),filter 450ms ease}
.prompt-card:hover img{transform:scale(1.075)}
.card-copy{transition:opacity 280ms ease,transform 450ms var(--motion-ease),background 240ms ease}
.card-copy:hover{transform:translateY(-2px);background:#fff}
.copy-main,.secondary-actions button,.secondary-actions a{transition:background 230ms ease,color 230ms ease,transform 420ms var(--motion-ease),border-color 230ms ease}
.copy-main:hover{transform:translateY(-2px)}.copy-main:active{transform:scale(.987)}
.viewer{opacity:0;transition:opacity 290ms ease;pointer-events:none}
.viewer.is-visible{opacity:1;pointer-events:auto}
.viewer-stage img{transform:translate3d(0,18px,0) scale(.962);opacity:0;filter:blur(5px);transition:opacity 520ms ease,transform 680ms var(--motion-ease),filter 510ms ease}
.viewer.is-visible .viewer-stage img{transform:translateZ(0) scale(1);opacity:1;filter:blur(0)}
.viewer-panel{transform:translate3d(37px,0,0);opacity:.6;transition:transform 610ms var(--motion-ease),opacity 420ms ease}
.viewer.is-visible .viewer-panel{transform:translateZ(0);opacity:1}
.viewer.is-visible .viewer-index{animation:dot-reveal 710ms var(--motion-ease) 110ms both}
.viewer.is-visible .viewer-spec,.viewer.is-visible .copy-main,.viewer.is-visible .secondary-actions{animation:panel-item-rise 550ms var(--motion-ease) 170ms both}
.viewer-image-switch{animation:image-next 440ms var(--motion-ease) both!important}
.viewer-nav button{transition:color 250ms ease,transform 400ms var(--motion-ease)}
.viewer-nav button:hover{transform:translateX(2px)}
.viewer-nav #viewer-prev:hover{transform:translateX(-2px)}
.prompt-reveal{transition:color 220ms ease,border-color 280ms ease}
.prompt-reveal span:last-child{display:inline-block;transition:transform 360ms var(--motion-ease)}
.prompt-reveal[aria-expanded=true] span:last-child{transform:rotate(180deg)}
.prompt-body:not([hidden]){animation:content-rise 370ms var(--motion-ease) both}
.toast.visible{transform:translate(-50%,0) scale(1)}
@media(max-width:760px){
 .viewer-panel{transform:translate3d(0,30px,0)}
 .entry-card:hover{transform:none;box-shadow:none}
 .prompt-card:hover{transform:none;box-shadow:none}
 .viewer-stage img{transform:translate3d(0,12px,0) scale(.975)}
 .viewer.is-visible .viewer-stage img{transform:none}
}
@media(prefers-reduced-motion:reduce){
 ::view-transition-old(root),::view-transition-new(root){animation:none!important}
 .view.is-entering *,.gallery-grid .prompt-card.is-appearing,.viewer.is-visible .viewer-index,.viewer.is-visible .viewer-spec,.viewer.is-visible .copy-main,.viewer.is-visible .secondary-actions{animation:none!important}
 .led,.entry-card:hover .entry-preview:before{animation:none!important}
 .viewer,.viewer-panel,.viewer-stage img,.preview-tile,.entry-card,.prompt-card,.card-copy{transition:none!important}
 .viewer{opacity:1}.viewer-stage img{opacity:1;transform:none;filter:none}.viewer-panel{opacity:1;transform:none}
}

/* Gallery-first layout: no interstitial page or guide. */
.gallery-view{display:block;min-height:100vh}
.gallery-head{align-items:flex-end}
.gallery-word{font-size:clamp(100px,12.4vw,180px);line-height:.83;letter-spacing:-.07em;min-width:0}
.gallery-word span{display:block;line-height:.93}
.gallery-word span+span{margin-top:5px}
.gallery-count{bottom:12px;flex:0 0 auto}
.gallery-toolbar{margin-top:27px;justify-content:flex-end}
.saved-access{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font:500 11px/1 'IBM Plex Mono',monospace;color:var(--muted);padding:10px 11px;border:1px solid var(--line);border-radius:5px;transition:border-color .22s ease,color .22s ease,background .22s ease}
.saved-access:hover,.saved-access.active{color:var(--ink);background:var(--panel);border-color:var(--muted)}
.saved-access span:last-child{font-size:10px;color:var(--subtle)}
/* Clearly visible, finger-sized controls, including on narrow screens. */
.viewer-top{position:sticky;top:0;z-index:3;gap:10px;background:var(--bg);padding:0 0 12px}
.viewer-nav{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.viewer-nav button{display:grid;place-items:center;width:52px;height:52px;min-width:52px;min-height:52px;padding:0;border-radius:7px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);font:600 26px/1 Inter,system-ui,sans-serif;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .3s var(--motion-ease)}
.viewer-nav button:hover{background:var(--line);border-color:var(--muted);color:var(--ink)}
.viewer-nav button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.viewer-nav button:disabled{opacity:.42;cursor:not-allowed}
.viewer-nav #viewer-close{background:var(--ink);border-color:var(--ink);color:var(--bg);font-size:29px}
.viewer-nav #viewer-close:hover{background:var(--toast);border-color:var(--toast);color:var(--bg)}
.viewer-nav #viewer-prev:hover{transform:translateX(-2px)}
.viewer-nav #viewer-next:hover{transform:translateX(2px)}
.viewer-nav #viewer-close:hover{transform:scale(1.035)}
.viewer-index{margin-top:5px}
@media(max-width:760px){
 .gallery-word{font-size:clamp(61px,15vw,100px);line-height:.91}
 .gallery-word span+span{margin-top:2px}
 .gallery-head{gap:8px}
 .gallery-count{bottom:4px}
 .gallery-toolbar{margin-top:25px}
 .toolbar-actions{width:100%;justify-content:flex-end;gap:6px}
 .saved-access{margin-right:auto;padding:9px 11px;min-height:44px}
 .viewer-panel{padding:14px 17px 35px}
 .viewer-nav{gap:8px}
 .viewer-nav button{width:52px;height:52px;min-width:52px;min-height:52px}
 .viewer-top{padding:0 0 10px}
}
@media(max-width:350px){
 .gallery-word{font-size:14.5vw}
 .viewer-nav button{width:48px;height:48px;min-width:48px;min-height:48px}
 .viewer-nav{gap:5px}
}

/* Keep the compact search closed: Safari/Chrome's intrinsic search-input width must not push Saved off-screen. */

/* Portfolio palette and navigation, preserving the Gallery's dot type and motion. */
.site-tools{position:relative;top:auto;right:auto;min-height:80px;padding:0 clamp(20px,5vw,76px);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(16px);z-index:20}
.site-tools-right{display:flex;align-items:center;gap:22px}
.portfolio-link{display:inline-flex;align-items:center;gap:14px;color:var(--ink);font:600 15px/1.1 Inter,-apple-system,sans-serif;white-space:nowrap;transition:color .25s ease}
.portfolio-link:hover{color:var(--accent)}
.portfolio-link>span:first-child{font:500 20px/1 Inter,sans-serif;transition:transform .35s var(--motion-ease)}
.portfolio-link:hover>span:first-child{transform:translateX(-4px)}
.portfolio-logo{font-size:22px;font-weight:750;letter-spacing:-.07em}
.portfolio-logo span{color:var(--muted);font-weight:400}
.gallery-view{max-width:1440px;margin:0 auto;padding:clamp(35px,5vw,72px) clamp(20px,5vw,76px) 80px}
.gallery-word{color:var(--ink)}
.viewer-stage{background:#ecefeb}
.stage-caption{color:#606b66}
.viewer-stage img{box-shadow:0 12px 36px #171b1a22}
.copy-main{background:var(--accent);color:#fff}
.copy-main:hover{background:#17473f;color:#fff}
@media(max-width:760px){.site-tools{min-height:60px;padding:0 18px}.site-tools-right{gap:15px}.portfolio-logo{font-size:19px}.portfolio-link{gap:8px}.gallery-view{padding:30px 18px 64px}}

/* Readable pixel typography: draw full pixel glyphs, not a dotted mask clipped inside a smooth font. */
.gallery-word,.viewer-index{
  font-family:"Pixelify Sans",ui-monospace,monospace;
  font-weight:700;
  letter-spacing:-.022em;
  line-height:.87;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  color:var(--ink);
}
.gallery-word span{line-height:.91}
.gallery-word span+span{margin-top:.035em}
.gallery-word{font-size:clamp(104px,12.3vw,180px)}
.viewer-index{font-size:84px;letter-spacing:0}
@media(max-width:760px){
  .gallery-word{font-size:clamp(68px,15.2vw,105px)}
  .viewer-index{font-size:62px}
}
@media(max-width:350px){.gallery-word{font-size:15.1vw}}

/* Kawaii Prompts: editable VectorCraft artwork replaces the former pixel-font headline. */
.gallery-logo{display:block;margin:0;flex:1 1 0;min-width:0;line-height:1}
.gallery-logo img{display:block;width:min(100%,840px);height:auto;margin-inline:auto;user-select:none}
.view.is-entering .gallery-logo img{animation:content-rise 560ms var(--motion-ease) both}
@media(prefers-reduced-motion:reduce){.view.is-entering .gallery-logo img{animation:none!important}}

/* portfolio-aligned numbering: use the same Michroma letterforms as WORKS / ABOUT. */
.gallery-count>span,
.card-number,
.card-ratio,
.viewer-index,
.stage-caption #stage-index {
  font-family: "Michroma", ui-monospace, monospace;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .012em;
}
.gallery-count>span { font-size: 23px; }
.viewer-index { font-size: clamp(57px, 5.4vw, 77px); line-height: 1.16; letter-spacing: -.055em; }
.card-number { font-size: 9px; padding: 4px 5px; }
.card-ratio, .stage-caption #stage-index { font-size: 9px; }
@media(max-width:760px){
  .gallery-count>span { font-size: 16px; }
  .viewer-index { font-size: 54px; }
  .card-number { font-size: 8px; }
}

/* Flat, hairline navigation matching the gallery's type and fine rules.
   It is an action strip, not a floating card. Keep every hit area 54px+. */
.viewer-nav{
  position:fixed;
  z-index:8;
  left:50%;
  bottom:calc(14px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(3,56px);
  gap:0;
  padding:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--bg);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.viewer-nav button{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  min-width:56px;
  min-height:56px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font:400 25px/1 'IBM Plex Mono',ui-monospace,monospace;
  transition:background .2s ease,color .2s ease;
}
.viewer-nav button+button{border-left:1px solid var(--line)}
.viewer-nav button:hover,.viewer-nav #viewer-close:hover{
  background:var(--panel2);
  color:var(--ink);
  transform:none;
}
.viewer-nav #viewer-close{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
  font-size:30px;
}
.viewer-nav #viewer-close:focus-visible{outline-offset:-3px}
.viewer-stage{padding-bottom:115px}
.viewer-stage img{max-height:calc(100vh - 160px)}
.viewer-stage .stage-caption{bottom:100px}
.viewer-panel{padding-top:32px}
@media(max-width:760px){
  /* Reserve an actual bottom dock area: the island never covers panel actions. */
  .viewer{
    height:100dvh;
    padding-bottom:calc(90px + env(safe-area-inset-bottom));
  }
  .viewer-nav{
    left:50%;
    bottom:calc(14px + env(safe-area-inset-bottom));
    top:auto;
    grid-template-columns:repeat(3,54px);
    padding:0;
    gap:0;
    border-radius:5px;
  }
  .viewer-nav button{
    width:54px;
    height:54px;
    min-width:54px;
    min-height:54px;
  }
  .viewer-stage{
    height:38dvh;
    flex:0 0 38dvh;
    padding:15px 10px 15px;
  }
  .viewer-stage img{max-height:calc(38dvh - 30px)}
  .viewer-stage .stage-caption{display:none}
  .viewer-panel{
    max-height:none;
    min-height:0;
    flex:1;
    padding-top:18px;
    padding-bottom:35px;
  }
}

/* Matching outline icons: same weight, no black tile, shadows or capsule. */
.viewer-nav button svg{
  display:block;
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.viewer-nav #viewer-close svg{width:22px;height:22px}
.viewer-nav button:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
@media(hover:none){.viewer-nav button:hover{background:transparent}}

/* On desktop the content wrapper is layout-transparent to the two-column grid. */
.viewer-content{display:contents}

/* Image-first desktop viewer: keep the artwork inside the available stage. */
.viewer-stage{
  min-width:0;
  min-height:0;
  padding:12px 12px 100px;
}
.viewer-stage img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:5px;
  box-shadow:none;
}
.viewer-stage .stage-caption{display:none}

/* X's in-app browser can expose a short visual viewport. Never limit a
   mobile artwork's width indirectly through vh/dvh; give the image the
   entire width and scroll the detail document below it instead. */
@media(max-width:760px){
  .viewer{
    display:flex;
    flex-direction:column;
    height:100dvh;
    overflow:hidden;
    padding:0;
  }
  .viewer-content{
    display:block;
    flex:1;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  /* The controls live in their own bottom row, never on top of the prompt. */
  .viewer-nav{
    position:relative;
    inset:auto;
    left:auto;
    bottom:auto;
    transform:none;
    flex:0 0 auto;
    align-self:center;
    margin:12px auto calc(14px + env(safe-area-inset-bottom));
  }
  .viewer-stage{
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    padding:6px 6px 8px;
  }
  .viewer-stage img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    max-height:none;
  }
  .viewer-panel{
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    overflow:visible;
    padding:18px 17px 32px;
  }
}