:root{--paper:#fbf6ee;--paper-2:#f4eadb;--card:#fffdf9;--ink:#3a2a21;--ink-soft:#5b483c;--muted:#7a675a;--honey:#e3a256;--honey-deep:#a6581d;--honey-soft:#f8e5c9;--rose:#d9604a;--line:#ecdfcc;--line-strong:#dcc8ac;--tone:var(--honey);--radius:22px;--radius-sm:16px;--shadow:0 1px 2px rgba(74,44,20,.06),0 14px 32px -16px rgba(74,44,20,.3);--shadow-lift:0 2px 4px rgba(74,44,20,.07),0 26px 52px -20px rgba(74,44,20,.42);--sans:"PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei UI","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;--latin:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
[data-work="warm-room"]{--tone:#e3a256}[data-work="moon-tea"]{--tone:#9fb3d9}[data-work="yuzu-onsen"]{--tone:#e9bf4c}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--paper);background-image:radial-gradient(circle at 1px 1px,rgba(122,86,52,.11) 1px,transparent 1.3px);background-size:24px 24px;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:800;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
p{text-wrap:pretty}
img{max-width:100%;display:block}
code{font-family:Consolas,"SF Mono",monospace;font-size:.92em;background:var(--paper-2);border-radius:6px;padding:1px 6px}
::selection{background:#f6cf96;color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,iframe:focus-visible,input:focus-visible{outline:3px solid var(--honey-deep);outline-offset:3px;border-radius:10px}
.pixel{display:block;flex:none}
.shell{width:min(1200px,calc(100% - 40px));margin-inline:auto}
.skip-link{position:absolute;top:8px;left:8px;transform:translateY(-160%);z-index:60;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px}
.skip-link:focus{transform:none}

.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 10px}
.brand{display:inline-flex;align-items:center;gap:12px;font-size:19px;font-weight:800;letter-spacing:.04em;line-height:1.2}
.brand small{display:block;margin-top:3px;font:italic 500 13px/1.2 var(--latin);letter-spacing:.06em;color:var(--muted)}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--ink);color:var(--honey);box-shadow:0 8px 16px -10px rgba(58,42,33,.9)}
.brand-mark .pixel{width:22px}
.header nav{display:flex;align-items:center;gap:4px}
.header nav a{padding:8px 15px;border-radius:999px;font-size:15px;font-weight:600;color:var(--ink-soft);transition:background .2s,color .2s}
.header nav a:hover{background:var(--paper-2);color:var(--ink)}
.header nav a[aria-current=page]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.header nav .header-download{margin-left:6px;background:var(--honey);color:var(--ink)}
.header nav .header-download:hover{background:#eab06b}

.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 22px;border:1.5px solid transparent;border-radius:999px;font-size:16px;font-weight:700;line-height:1.3;text-align:center;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
.button.large{min-height:54px;padding:13px 28px;font-size:17px}
.button.primary{background:var(--ink);color:var(--paper);box-shadow:0 10px 20px -12px rgba(58,42,33,.85)}
.button.primary:hover{background:#56402f;color:#fff;transform:translateY(-1px)}
.button.soft{background:var(--honey-soft);color:var(--ink)}
.button.soft:hover{background:#f3d3a6}
.button.ghost{border-color:var(--line-strong);background:rgba(255,253,249,.7);color:var(--ink)}
.button.ghost:hover{border-color:var(--ink)}
.button[aria-disabled="true"],.button[aria-disabled="true"]:hover{background:var(--paper-2);border-color:transparent;color:var(--muted);box-shadow:none;cursor:default;transform:none}

.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--honey-soft);color:var(--honey-deep);font-size:14px;font-weight:700}
.eyebrow .pixel{width:11px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;background:rgba(255,253,249,.94);color:var(--ink);font-size:12px;font-weight:700;line-height:1.6;letter-spacing:0;white-space:nowrap}
.tag::before{content:"";width:6px;height:6px;border-radius:1px;background:var(--tone)}
.tag.tag-free{background:var(--honey)}
.tag.tag-free::before{background:var(--ink)}

.hero{display:grid;gap:36px;align-items:center;padding:36px 0 28px;background:radial-gradient(closest-side at 50% 80%,rgba(246,207,150,.55),transparent)}
.hero h1{margin:20px 0 18px;font-size:clamp(40px,5.4vw,70px);line-height:1.14;letter-spacing:-.025em}
.hero h1 mark{padding:0 .04em;color:inherit;background:linear-gradient(transparent 60%,#f6cf96 60%,#f6cf96 90%,transparent 90%)}
.lead{max-width:520px;color:var(--ink-soft);font-size:clamp(16px,1.45vw,18px);line-height:1.95}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.facts{display:flex;flex-wrap:wrap;gap:6px 20px;margin:22px 0 0;padding:0;list-style:none;color:var(--muted);font-size:14px}
.facts li{display:flex;align-items:center;gap:8px}
.facts li::before{content:"";width:6px;height:6px;border-radius:1px;background:var(--honey)}
.showcase{position:relative;display:block;padding:20px 0 34px}
.screen{position:relative;display:block;padding:9px;border-radius:24px;background:linear-gradient(155deg,#4b382c,#2b1f18);box-shadow:var(--shadow-lift)}
.screen img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:15px;transition:filter .3s}
.screen::after{content:"";position:absolute;left:50%;bottom:-26px;width:15%;height:26px;transform:translateX(-50%);background:linear-gradient(#c9b091,#e3d0b6);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}
.showcase::after{content:"";position:absolute;left:50%;bottom:3px;width:34%;height:9px;transform:translateX(-50%);border-radius:999px;background:#d6bf9f;box-shadow:0 12px 20px -10px rgba(74,44,20,.55)}
.showcase:hover .screen img{filter:brightness(1.04) saturate(1.06)}
.sticker{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 12px;border-radius:14px;background:var(--card);box-shadow:0 12px 26px -12px rgba(74,44,20,.5);color:var(--ink);font-size:14px;font-weight:700;line-height:1.3;transition:transform .3s}
.sticker::before{content:"";position:absolute;top:-9px;left:50%;width:46px;height:16px;transform:translateX(-50%) rotate(-4deg);border-radius:2px;background:rgba(236,183,112,.62)}
.sticker .pixel{width:18px;color:var(--honey-deep)}
.sticker-a{top:2px;left:4%;transform:rotate(-4deg)}
.sticker-b{right:4%;bottom:62px;transform:rotate(3deg)}
.sticker-b .pixel{width:16px;color:var(--rose)}
.showcase:hover .sticker-a{transform:rotate(-7deg) translateY(-3px)}
.showcase:hover .sticker-b{transform:rotate(5deg) translateY(-3px)}

.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 24px;margin-bottom:26px}
.section-head h2{font-size:clamp(27px,3vw,38px)}
.section-head p{color:var(--muted)}
.more-link{color:var(--honey-deep);font-weight:700}
.more-link::after{content:" →"}
.more-link:hover{text-decoration:underline;text-underline-offset:4px}
.works{padding:48px 0 16px}
.work-grid{display:grid;gap:24px}
.work{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.work:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.work-image{position:relative;display:block;overflow:hidden;background:var(--paper-2)}
.work-image img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .5s}
.work:hover .work-image img{transform:scale(1.03)}
.work-image .tag{position:absolute;top:14px;left:14px;box-shadow:0 6px 14px -8px rgba(0,0,0,.55)}
.work-copy{display:flex;flex:1;flex-direction:column;gap:10px;padding:22px 24px 24px}
.work-copy h3{display:flex;align-items:center;gap:10px;font-size:23px}
.work-copy h3::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--tone)}
.work-copy h3 a:hover{color:var(--honey-deep)}
.description{white-space:pre-line;color:var(--ink-soft);line-height:1.85}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:10px}
.catalog-tail{display:flex;align-items:center;justify-content:center;gap:10px;padding:34px 0 8px;color:var(--muted);font-size:15px}
.catalog-tail .pixel{width:11px;color:var(--honey)}
.howto{padding:44px 0 56px}
.steps{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.steps li{position:relative;padding:24px 24px 26px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.step-number{display:block;margin-bottom:12px;color:var(--honey-deep);font:italic 700 34px/1 var(--latin)}
.steps h3{margin-bottom:8px;font-size:19px;overflow-wrap:anywhere}
.steps p{color:var(--ink-soft);font-size:15px;line-height:1.85}

.detail-hero{display:grid;grid-template-areas:"copy" "preview" "download";gap:22px;padding:24px 0 36px}
.detail-copy{grid-area:copy}
.work-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:16px;color:var(--muted);font-size:14px;font-weight:600}
.work-name a{color:var(--honey-deep)}
.work-name a:hover{text-decoration:underline;text-underline-offset:4px}
.detail-copy h1{font-size:clamp(32px,4.2vw,54px);line-height:1.18;letter-spacing:-.02em}
.detail-copy .intro{margin-top:16px;color:var(--ink-soft);font-size:clamp(16px,1.4vw,18px);line-height:1.95}
.preview{grid-area:preview;min-width:0;align-self:start;overflow:hidden;padding:10px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-lift)}
.preview-media{position:relative;overflow:hidden;aspect-ratio:1.6;border-radius:14px;background:#3a2a21;background:color-mix(in srgb,var(--tone) 30%,#2b1f18)}
.preview-media iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.preview-error{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;background:var(--paper);color:var(--ink);font-size:15px;text-align:center}
.preview-error[hidden]{display:none}
.preview-error a{text-decoration:underline;text-underline-offset:4px}
.preview-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;padding:14px 6px 6px}
.preview-bar p{font-size:16px;font-weight:700}
.preview-buttons{display:flex;flex-wrap:wrap;gap:8px}
.preview-buttons button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 16px;border:1.5px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--ink);font-size:15px;font-weight:600;line-height:1.3;transition:border-color .2s,background .2s}
.preview-buttons button::before{content:"";flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.preview-buttons button:hover:not(:disabled){border-color:var(--ink)}
.preview-buttons button:disabled{opacity:.5;cursor:wait}
.preview-buttons [data-preview-action="lamp"],.preview-buttons [data-preview-action="pet"]{border-color:transparent;background:var(--honey-soft)}
.preview-buttons [data-preview-action="lamp"]:hover:not(:disabled),.preview-buttons [data-preview-action="pet"]:hover:not(:disabled){border-color:transparent;background:#f3d3a6}
[data-preview-action="lamp"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath d='M2 0h6v1H2zM1 1h8v1H1zM0 2h10v1H0zM4 3h2v3H4zM2 6h6v1H2z'/%3E%3C/svg%3E")}
[data-preview-action="pet"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6'%3E%3Cpath d='M1 0h2v1H1zM4 0h2v1H4zM0 1h7v2H0zM1 3h5v1H1zM2 4h3v1H2zM3 5h1v1H3z'/%3E%3C/svg%3E")}
[data-preview-action="pause"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M1 0h2v7H1zM4 0h2v7H4z'/%3E%3C/svg%3E")}
[data-preview-action="pause"][aria-pressed="true"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M1 0h2v7H1zM3 1h1v5H3zM4 2h1v3H4zM5 3h1v1H5z'/%3E%3C/svg%3E")}
#expand-preview{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M0 0h3v1H0zM0 1h1v2H0zM6 0h3v1H6zM8 1h1v2H8zM0 6h1v2H0zM0 8h3v1H0zM8 6h1v2H8zM6 8h3v1H6z'/%3E%3C/svg%3E")}
#expand-preview[aria-expanded="true"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1zM2 2h1v1H2zM3 3h1v1H3zM4 4h1v1H4zM5 5h1v1H5zM6 6h1v1H6zM6 0h1v1H6zM5 1h1v1H5zM4 2h1v1H4zM2 4h1v1H2zM1 5h1v1H1zM0 6h1v1H0z'/%3E%3C/svg%3E")}
.preview-status{display:flex;align-items:center;gap:8px;padding:6px 8px 0;color:var(--muted);font-size:13px}
.preview-status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 4px var(--honey-soft);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 0 7px transparent}}
.asset-note{padding:4px 8px 6px;color:var(--muted);font-size:12px}
.preview-expanded{position:fixed;inset:16px;z-index:50;display:flex;flex-direction:column;justify-content:center;padding:16px;border-radius:26px;box-shadow:0 0 0 100vmax rgba(36,24,17,.62),0 30px 80px rgba(0,0,0,.45)}
.preview-expanded .preview-media{flex-shrink:0;align-self:center;width:min(100%,calc((100dvh - 230px)*1.6))}
.preview-expanded .preview-bar,.preview-expanded .preview-status,.preview-expanded .asset-note{align-self:center;width:min(100%,1200px)}
body.preview-open{overflow:hidden}
.detail-download{grid-area:download;padding:24px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.detail-download h2{margin-bottom:8px;font-size:21px}
.device-note{margin-bottom:18px;color:var(--muted);font-size:14px;line-height:1.8}
.download-button{width:100%;min-height:56px;font-size:17px}
.detail-download .meta{margin-top:12px;color:var(--muted);font-size:13px}
.download-info{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;color:var(--muted);font-size:12px}
.download-info a{text-decoration:underline;text-underline-offset:3px}
.trial-note{margin-top:14px;color:var(--muted);font-size:13px;line-height:1.8}
.trial-note a{color:var(--honey-deep);text-decoration:underline;text-underline-offset:4px}
.text-button{min-height:44px;margin-top:6px;padding:10px 0;border:0;background:none;color:var(--honey-deep);font-size:14px;font-weight:700;text-align:left;text-decoration:underline;text-underline-offset:4px}
#share-status{color:var(--muted);font-size:13px}
#share-fallback{width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--paper);color:var(--ink);font:14px/1.6 var(--sans)}
.moments{padding:20px 0 28px}
.moments>h2,.more-works>h2{margin-bottom:18px;font-size:clamp(22px,2.4vw,28px)}
.moments-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.moment{padding:22px;border-radius:var(--radius-sm);background:var(--card);box-shadow:var(--shadow)}
.moment .pixel{box-sizing:content-box;width:24px;padding:11px;border-radius:14px;background:var(--honey-soft);color:var(--honey-deep)}
.moment:first-child .pixel{color:var(--rose)}
.moment h3{margin:14px 0 6px;font-size:18px}
.moment p{color:var(--ink-soft);font-size:15px;line-height:1.8}
.more-works{padding:28px 0 56px}
.more-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.more-card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-sm);background:var(--card);box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.more-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.more-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.more-card>span{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px}
.more-card strong{font-size:16px}

.guide-section{padding:44px 0 28px}
.guide-section>h2{margin-bottom:26px;font-size:clamp(26px,3vw,36px);text-align:center}
.guide-section>h2::after{content:"";display:block;width:44px;height:6px;margin:16px auto 0;border-radius:2px;background:linear-gradient(90deg,var(--honey) 0 33%,transparent 33% 50%,var(--honey) 50% 83%,transparent 83%)}
.guide-section.feedback{max-width:720px;margin:20px auto 0;padding:32px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);text-align:center}
.guide-section.feedback>h2{margin-bottom:12px}
.guide-section.feedback p{color:var(--ink-soft)}
.guide-section.feedback a{color:var(--honey-deep);text-decoration:underline;text-underline-offset:4px}
.faq{display:grid;gap:24px;padding:28px 0 64px}
.faq h2{font-size:clamp(26px,3vw,34px);line-height:1.3}
.faq-lead p{margin-top:12px;color:var(--muted)}
.faq-items{display:grid;gap:10px;align-content:start}
.faq details{padding:0 20px;border-radius:var(--radius-sm);background:var(--card);box-shadow:var(--shadow)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;font-size:16px;font-weight:700;line-height:1.6;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex-shrink:0;width:16px;height:16px;color:var(--honey-deep);transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{padding:0 0 18px;color:var(--ink-soft);font-size:15px;line-height:1.9;overflow-wrap:anywhere}
.faq details a{text-decoration:underline;text-underline-offset:3px}
.page-head{padding:40px 0 0;text-align:center}
.page-head h1{font-size:clamp(32px,4vw,46px)}
.page-head p{margin-top:8px;color:var(--muted)}
.guide-page .guide-section{padding-top:32px}

.document-page{max-width:780px;margin:32px auto 64px;padding:clamp(26px,5vw,56px);border-radius:28px;background:var(--card);box-shadow:var(--shadow)}
.document-page h1{margin-bottom:22px;font-size:clamp(28px,3.4vw,40px);line-height:1.3}
.document-page h2{display:flex;align-items:center;gap:10px;margin:32px 0 10px;font-size:20px}
.document-page h2::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--honey)}
.document-page p{color:var(--ink-soft);line-height:1.95}
.document-page p+p{margin-top:12px}
.document-page a{color:var(--honey-deep);text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.catalog-error{padding:80px 0 96px;text-align:center}
.catalog-error .pixel{width:46px;margin:0 auto 22px;color:var(--honey)}
.catalog-error h1{margin-bottom:26px;font-size:clamp(26px,3vw,36px)}

.footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:28px 0 40px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.footer-brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:14px;font-weight:700}
.footer .brand-mark{width:30px;height:30px;border-radius:9px;box-shadow:none}
.footer .brand-mark .pixel{width:16px}
.footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer nav a:hover{color:var(--honey-deep)}
.footer-note{flex-basis:100%;font-size:12px}

@media(min-width:760px){
 .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
 .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
 .faq{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:48px}
}
@media(min-width:960px){
 .hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);gap:56px;padding:60px 0 44px;background:radial-gradient(closest-side at 76% 50%,rgba(246,207,150,.55),transparent)}
}
@media(min-width:1000px){
 .moments-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .detail-hero{grid-template-columns:minmax(300px,.78fr) minmax(0,1.7fr);grid-template-areas:"copy preview" "download preview";column-gap:44px;row-gap:26px;align-items:start;padding:40px 0 52px}
}
@media(max-width:720px){
 .shell{width:calc(100% - 32px)}
 .header{padding:16px 0 6px;gap:10px}
 .brand{gap:10px;font-size:17px}
 .brand-mark{width:36px;height:36px;border-radius:11px}
 .brand-mark .pixel{width:19px}
 .header nav a{padding:7px 11px;font-size:14px}
 .header nav .header-download{display:none}
 .hero{padding:24px 0 12px;gap:26px}
 .hero-actions .button{flex:1 1 auto}
 .showcase{padding-top:16px}
 .sticker{padding:7px 12px 7px 10px;font-size:12px}
 .sticker .pixel{width:15px}
 .sticker-b{bottom:52px}
 .works{padding-top:36px}
 .work-copy{padding:18px 18px 20px}
 .work-copy h3{font-size:21px}
 .detail-hero{padding-top:14px}
 .preview{padding:8px}
 .preview-bar{padding:12px 4px 4px}
 .preview-bar p{font-size:15px}
 .preview-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:7px}
 .preview-buttons button{justify-content:center;padding:8px 10px;font-size:14px}
 .moments-grid{grid-template-columns:1fr;gap:12px}
 .moment{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;padding:16px 18px}
 .moment .pixel{grid-row:span 2;align-self:start;width:20px;padding:10px;border-radius:12px}
 .moment h3{margin:1px 0 2px;font-size:17px}
 .moment p{font-size:14.5px;line-height:1.7}
 .more-grid{grid-template-columns:1fr}
 .preview-expanded{inset:8px;padding:10px}
 .preview-expanded .preview-media{width:100%}
 .detail-download{padding:20px}
 .guide-section.feedback{padding:24px 20px}
 .document-page{margin-top:20px;border-radius:22px}
}
@media(max-width:380px){
 .brand small{display:none}
 .header nav a{padding:7px 9px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}