:root {
--paper: #f6f2e9;        
--darkroom: #1c1a17;     
--amber: #e8890c;        
--opacifier: #7e8b7c;    
--ink: #23305a;          
--graphite: #2e2b28;     
--paper-100: #fffdf8;
--paper-200: #faf7ef;
--paper-300: #f6f2e9;    
--paper-400: #ede8db;
--paper-500: #e0d9c8;
--paper-600: #cfc6b1;
--dark-900: #131210;     
--dark-850: #1c1a17;     
--dark-800: #232019;     
--dark-750: #2a2723;     
--dark-700: #2e2b28;     
--dark-600: #3a3630;     
--dark-500: #4b463f;
--amber-050: #fbe6cf;
--amber-300: #f2ac4d;
--amber-400: #f09a22;    
--amber-500: #e8890c;    
--amber-600: #ce7808;    
--amber-700: #b56607;
--amber-800: #9e5507;    
--amber-900: #7c4205;
--opacifier-light: #9aa598;
--opacifier-500: #7e8b7c;
--opacifier-dark: #5e6a5c;
--ink-500: #23305a;
--ink-light: #3b4a7d;
--surface-sunken: var(--dark-900);
--surface-base: var(--dark-850);
--surface-raised: var(--dark-800);
--surface-overlay: var(--dark-750);
--surface-inset: #0f0e0c;
--scrim: rgba(11, 10, 9, 0.66);
--text-primary: #f6f2e9;
--text-secondary: #a8a29a;
--text-tertiary: #726d64;
--text-disabled: #55514a;
--text-inverse: #1c1a17;
--text-meta: #9c958a;
--text-status: #cfc8bd;
--accent: var(--amber-500);
--accent-hover: var(--amber-400);
--accent-press: var(--amber-600);
--accent-quiet: rgba(232, 137, 12, 0.14);
--accent-line: rgba(232, 137, 12, 0.42);
--on-accent: #33261a;          
--accent-text: var(--amber-400); 
--border-subtle: rgba(246, 242, 233, 0.08);
--border-default: rgba(246, 242, 233, 0.14);
--border-strong: rgba(246, 242, 233, 0.24);
--fill-quiet: rgba(246, 242, 233, 0.06);
--fill-quiet-hover: rgba(246, 242, 233, 0.10);
--fill-strong: rgba(246, 242, 233, 0.14);
--film-undeveloped: var(--opacifier-500);  
--shelf-ledge-top: var(--dark-700);
--shelf-ledge-bottom: var(--dark-900);
--slot-fill: #000000;
--slot-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.85),
0 -3px 10px rgba(232, 137, 12, 0.32);
--print-shadow: 0 2px 5px rgba(0, 0, 0, 0.34), 0 10px 22px rgba(0, 0, 0, 0.30);
--caption-ink-blue: #23305a;
--caption-ink-black: #1c1a17;
--caption-ink-red: #b0442f;
--caption-ink-silver: #9aa0a6;
--caption-ghost-presence: 0.4; 
--map-frame: rgba(28, 26, 23, 0.22);
--caption-ink: #7c8ec4;      
--link: var(--amber-400);
--link-hover: var(--amber-300);
--success: #6f9a6a;
--warning: var(--amber-500);
--danger: #c65b45;
--danger-text: #e08a75;
--danger-quiet: rgba(198, 91, 69, 0.16);
color-scheme: dark;
}
:root {
--font-display: "Hanken Grotesk", "Söhne", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Noto Sans JP", "Noto Sans KR", sans-serif;
--font-ui: var(--font-display);
--font-mono: "Space Mono", ui-monospace, "SF Mono", "Roboto Mono", Menlo,
"Noto Sans JP", "Noto Sans KR", monospace;
--font-hand-marker: "Permanent Marker", "Neucha", "Yomogi", "Gaegu", cursive;      
--font-hand-ballpoint: "Reenie Beanie", "Marck Script", "Zen Kurenaido", "Nanum Pen Script", cursive; 
--font-hand-cursive: "Homemade Apple", "Marck Script", "Klee One", "Nanum Pen Script", cursive; 
--font-hand-casual: "Caveat", "Yomogi", "Gaegu", cursive;                
--font-hand-print: "Shadows Into Light", "Neucha", "Klee One", "Nanum Pen Script", cursive; 
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-heavy: 800;
--text-display-size: 2.5rem;   
--text-display-line: 1.06;
--text-display-track: -0.02em;
--text-largetitle-size: 2.125rem; 
--text-largetitle-line: 1.12;
--text-largetitle-track: -0.018em;
--text-title1-size: 1.75rem;   
--text-title1-line: 1.16;
--text-title1-track: -0.015em;
--text-title2-size: 1.375rem;  
--text-title2-line: 1.2;
--text-title2-track: -0.01em;
--text-title3-size: 1.25rem;   
--text-title3-line: 1.24;
--text-title3-track: -0.008em;
--text-body-size: 1.0625rem;   
--text-body-line: 1.4;
--text-body-track: -0.005em;
--text-callout-size: 1rem;     
--text-callout-line: 1.4;
--text-callout-track: 0;
--text-subhead-size: 0.9375rem; 
--text-subhead-line: 1.4;
--text-subhead-track: 0;
--text-footnote-size: 0.8125rem; 
--text-footnote-line: 1.38;
--text-footnote-track: 0;
--text-caption-size: 0.75rem;  
--text-caption-line: 1.34;
--text-caption-track: 0.002em;
--text-mono-size: 0.8125rem;   
--text-mono-line: 1.3;
--text-mono-track: 0.02em;
--text-mono-lg-size: 1.125rem; 
--text-mono-caps-track: 0.14em; 
}
:root {
--space-0: 0;
--space-1: 2px;
--space-2: 4px;
--space-3: 8px;
--space-4: 12px;
--space-5: 16px;   
--space-6: 20px;   
--space-7: 24px;
--space-8: 32px;
--space-9: 40px;
--space-10: 48px;
--space-11: 64px;
--space-12: 80px;
--gutter: var(--space-5);
--screen-margin: var(--space-6);
--section-gap: var(--space-8);
--hit-target: 44px;      
--control-height: 52px;  
--control-height-sm: 40px;
--safe-top: 59px;        
--safe-bottom: 34px;     
}
:root {
--radius-none: 0;
--radius-xs: 4px;    
--radius-sm: 8px;    
--radius-md: 12px;   
--radius-lg: 16px;   
--radius-xl: 22px;   
--radius-2xl: 28px;  
--radius-pill: 999px;
--radius-circle: 50%;
--radius-frame: 6px;   
--radius-shutter: 50%; 
}
:root {
--shadow-0: none;
--shadow-1: 0 1px 2px rgba(28, 26, 23, 0.10);
--shadow-2: 0 2px 8px rgba(28, 26, 23, 0.12);
--shadow-3: 0 8px 24px rgba(28, 26, 23, 0.16);
--shadow-4: 0 18px 44px rgba(28, 26, 23, 0.24);
--shadow-photo: 0 2px 3px rgba(28, 26, 23, 0.14),
0 14px 30px rgba(28, 26, 23, 0.22);
--glow-amber: 0 0 0 1px rgba(232, 137, 12, 0.4),
0 0 28px rgba(232, 137, 12, 0.34);
--glow-amber-soft: 0 0 40px rgba(232, 137, 12, 0.28);
--shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.5);
--inset-well: inset 0 1px 2px rgba(0, 0, 0, 0.45);
--inset-engrave: inset 0 1px 0 rgba(0, 0, 0, 0.5),
inset 0 -1px 0 rgba(246, 242, 233, 0.06);
--edge-highlight: inset 0 1px 0 rgba(246, 242, 233, 0.06); 
}
:root {
--dur-instant: 80ms; 
--dur-fast: 140ms; 
--dur-base: 220ms; 
--dur-slow: 300ms; 
--dur-sheet: 340ms; 
--dur-eject: 700ms; 
--dur-develop: 11s; 
--ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); 
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); 
--ease-in: cubic-bezier(0.4, 0.0, 1, 1); 
--ease-eject: cubic-bezier(0.22, 0.68, 0.2, 1.0); 
--ease-settle: cubic-bezier(0.34, 1.42, 0.64, 1); 
--ease-develop: cubic-bezier(0.45, 0.05, 0.3, 1); 
--press-scale: 0.97; 
--press-dim: 0.88; 
}
@media (prefers-reduced-motion: reduce) {
:root {
--dur-eject: 1ms; 
--dur-develop: 900ms; 
}
}
a {
color: var(--link);
text-decoration: none;
text-underline-offset: 2px;
transition: color var(--dur-fast) var(--ease-standard);
}
a:hover {
color: var(--link-hover);
text-decoration: underline;
}
::selection {
background: var(--accent-quiet);
color: var(--text-primary);
}
@font-face {
font-family: "Hanken Grotesk";
src: url("../fonts/hanken-grotesk-var.woff2?v=a73d4f2a") format("woff2");
font-weight: 400 800;
font-display: swap;
}
@font-face {
font-family: "Space Mono";
src: url("../fonts/space-mono.woff2?v=b99f971b") format("woff2");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Space Mono";
src: url("../fonts/space-mono-bold.woff2?v=bff98d8e") format("woff2");
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "Permanent Marker";
unicode-range: U+0000-024F, U+2010-2027, U+2030-205E;
src: url("../fonts/permanent-marker.woff2?v=8c78e16f") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Reenie Beanie";
unicode-range: U+0000-024F, U+2010-2027, U+2030-205E;
src: url("../fonts/reenie-beanie.woff2?v=c8155181") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Homemade Apple";
unicode-range: U+0000-024F, U+2010-2027, U+2030-205E;
src: url("../fonts/homemade-apple.woff2?v=936b8d72") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Shadows Into Light";
unicode-range: U+0000-024F, U+2010-2027, U+2030-205E;
src: url("../fonts/shadows-into-light.woff2?v=12acce63") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Caveat";
unicode-range: U+0000-024F, U+2010-2027, U+2030-205E, U+0400-04FF;
src: url("../fonts/caveat-var.woff2?v=1a9a6b59") format("woff2");
font-weight: 400 700;
font-display: swap;
}
@font-face {
font-family: "Neucha";
src: url("../fonts/neucha.woff2?v=afcc0140") format("woff2");
unicode-range: U+0400-04FF, U+0020, U+002C, U+002E, U+0027, U+2019;
font-display: swap;
}
@font-face {
font-family: "Marck Script";
src: url("../fonts/marck-script.woff2?v=9aa0d826") format("woff2");
unicode-range: U+0400-04FF, U+0020, U+002C, U+002E, U+0027, U+2019;
font-display: swap;
}
@font-face {
font-family: "Yomogi";
src: url("../fonts/yomogi.woff2?v=45389d57") format("woff2");
unicode-range: U+3000-30FF, U+4E00-9FFF, U+FF00-FFEF, U+0020, U+002C, U+002E, U+0027, U+2019;
font-display: swap;
}
@font-face {
font-family: "Zen Kurenaido";
src: url("../fonts/zen-kurenaido.woff2?v=63f25ee8") format("woff2");
unicode-range: U+3000-30FF, U+4E00-9FFF, U+FF00-FFEF, U+0020, U+002C, U+002E, U+0027, U+2019;
font-display: swap;
}
@font-face {
font-family: "Klee One";
src: url("../fonts/klee-one.woff2?v=78830480") format("woff2");
unicode-range: U+3000-30FF, U+4E00-9FFF, U+FF00-FFEF, U+0020, U+002C, U+002E, U+0027, U+2019;
font-display: swap;
}
@font-face {
font-family: "Gaegu";
src: url("../fonts/gaegu.woff2?v=bddb2887") format("woff2");
unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7AF, U+0020, U+002C, U+002E, U+0027, U+2019;
font-display: swap;
}
@font-face {
font-family: "Nanum Pen Script";
src: url("../fonts/nanum-pen-script.woff2?v=0ca693ff") format("woff2");
unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7AF, U+0020, U+002C, U+002E, U+0027, U+2019;
font-display: swap;
}
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--surface-base);
color: var(--text-primary);
font-family: var(--font-display);
font-size: var(--text-body-size);
line-height: var(--text-body-line);
letter-spacing: var(--text-body-track);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
main section[id], #privacy, #develop, #films, #pricing { scroll-margin-top: 72px; }
img { max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
button { font: inherit; color: inherit; }
b, strong { font-weight: 600; }
.wrap { max-width: 1280px; margin: 0 auto; }
.wrap-pad { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.sec { padding: 64px 20px; }
.sec-lg { padding: 72px 20px; }
.sunken { background: var(--surface-sunken); }
.hairline-y { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.hairline-t { border-top: 1px solid var(--border-subtle); }
.text { max-width: 640px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: 10px 16px;
border-radius: 8px;
background: var(--accent);
color: var(--on-accent);
font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
.eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent-text);
}
.h1 { font-size: 40px; line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; margin: 18px 0 0; text-wrap: balance; }
.h2 { font-size: 30px; line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; margin: 14px 0 0; text-wrap: balance; }
.h2 .quiet { color: var(--text-secondary); }
.lede { font-size: 17px; line-height: 1.5; color: var(--text-secondary); margin: 16px 0 0; text-wrap: pretty; }
.lede-follow { margin-top: 12px; }
.text-narrow { max-width: 620px; }
.more-row { margin-top: 30px; }
.mono {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
hyphens: manual;
-webkit-hyphens: manual;
color: var(--text-meta);
line-height: 1.5;
}
.mono-accent { color: var(--accent-text); }
.k { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.tm, .foot-domain { text-transform: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; margin: 10px 0 6px; text-wrap: balance; }
.p { font-size: 15px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.more { display: inline-flex; align-items: center; min-height: 44px; font-size: 15.5px; font-weight: 600; color: var(--accent-text); }
.g2, .g3, .g4, .stack, .tiers, .foot { display: grid; grid-template-columns: 1fr; gap: 22px; }
.stack { gap: 34px; align-items: center; }
.scroll {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
justify-content: safe center;
}
.scroll::-webkit-scrollbar { display: none; }
.scroll > * { scroll-snap-align: center; }
.rise { transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.rise.pending { opacity: 0; transform: translateY(14px); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { transition: none; } .rise.pending { opacity: 1; transform: none; } }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 10px 20px;
border-radius: var(--radius-md);
border: none;
box-sizing: border-box;
font-family: var(--font-display);
font-size: 15.5px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.25;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), filter var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: scale(var(--press-scale)); filter: brightness(0.94); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.btn-secondary { background: var(--fill-quiet); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-default); }
.btn-secondary:hover { background: var(--fill-quiet-hover); color: var(--text-primary); text-decoration: none; }
.btn-block { display: flex; width: 100%; }
span.btn { cursor: default; }
span.btn:active { transform: none; filter: none; }
.badge { display: inline-block; padding: 5px; color: #fff; text-decoration: none; }
.badge-inner {
display: inline-flex;
align-items: center;
box-sizing: border-box;
height: 54px;
width: 162px;
gap: 9px;
padding: 0 13px;
border-radius: 9px;
background: #000;
border: 1px solid rgba(255, 255, 255, 0.45);
color: #fff;
}
.badge-inner .icon { width: 30px; height: 30px; fill: #fff; }
.badge-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.08; color: #fff; }
.badge-text span:first-child { font-size: 11px; letter-spacing: 0.01em; }
.badge-text span:last-child { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.badge-official img { display: block; height: 54px; width: auto; }
.badge-sm.badge-official img { height: 40px; }
html[lang="ja"] .badge-text span:last-child, html[lang="ko"] .badge-text span:last-child { font-size: 15px; white-space: nowrap; }
.badge-sm .badge-inner { height: 40px; width: auto; min-width: 120px; gap: 6px; padding: 0 9px; border-radius: 7px; }
.badge-sm .badge-inner .icon { width: 22px; height: 22px; }
.badge-sm .badge-text span:first-child { font-size: 8.5px; }
.badge-sm .badge-text span:last-child { font-size: 14px; }
html[lang="ja"] .badge-sm .badge-text span:last-child, html[lang="ko"] .badge-sm .badge-text span:last-child { font-size: 12px; }
.icon { width: 24px; height: 24px; fill: currentColor; flex: none; }
.icon-sm { width: 20px; height: 20px; fill: currentColor; flex: none; }
.nav {
position: sticky;
top: 0;
z-index: 40;
background: color-mix(in srgb, var(--surface-base) 88%, transparent);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-subtle);
transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.nav.is-clear { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
.nav-inner { height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text-primary); text-decoration: none; min-height: 44px; }
.brand:hover { color: var(--text-primary); text-decoration: none; }
.brand img { border-radius: 8px; display: block; }
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.brand-accent { color: var(--accent-text); }
.navlinks { display: flex; align-items: center; gap: 10px; }
.navlink { display: none; align-items: center; min-height: 44px; font-size: 15px; color: var(--text-secondary); padding: 0 2px; }
.navlink:hover { color: var(--text-primary); text-decoration: none; }
.nav-cta { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--accent-text); padding: 0 2px; white-space: nowrap; }
.nav-cta:hover { text-decoration: none; color: var(--accent-hover); }
.menu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-right: -8px;
background: none;
border: none;
border-radius: 10px;
color: var(--text-primary);
cursor: pointer;
}
.menu-btn:hover { background: var(--fill-quiet); }
.menu-panel {
position: absolute;
left: 0;
right: 0;
top: 100%;
padding: 10px 20px 18px;
background: color-mix(in srgb, var(--surface-base) 96%, transparent);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-subtle);
box-shadow: var(--shadow-3);
}
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel ul a { display: flex; align-items: center; min-height: 48px; font-size: 18px; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); }
.menu-panel li:last-child a { border-bottom: 0; }
.menu-panel ul a:hover { color: var(--accent-text); text-decoration: none; }
.menu-langs { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.menu-langs .foot-label { width: 100%; margin: 0 0 4px; }
.menu-langs a, .menu-langs span { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; color: var(--text-secondary); }
.menu-langs a:hover { color: var(--text-primary); text-decoration: none; }
.menu-langs [aria-current] { color: var(--text-primary); font-weight: 600; }
.hero { position: relative; overflow: hidden; }
.hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 55% at 74% 34%, rgba(232, 137, 12, 0.13), transparent 62%); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; padding: 20px 20px 44px; }
.hero-copy { container-type: inline-size; }
.hero-copy .lede { max-width: 44ch; }
.hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 26px 0 0; }
.hero-see { font-size: 15.5px; color: var(--text-secondary); min-height: 44px; display: inline-flex; align-items: center; }
.hero-see:hover { color: var(--text-primary); }
.hero-see .glyph { font-family: var(--font-mono); margin-left: 0.35em; }
.hero-note { margin: 18px 0 0; }
.hero-visual { display: flex; justify-content: center; margin: 4px 0 0; }
.hero-print { width: min(80vw, 300px); }
.hero-print .slot { margin-top: 12px; }
.dev-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.dev-row .dev-state { flex: none; width: auto; min-width: 13ch; margin: 0; text-align: right; }
.loop-toggle { min-height: 44px; padding: 0 10px; background: none; border: none; border-radius: 8px; color: var(--text-secondary); cursor: pointer; }
.loop-toggle:hover { color: var(--text-primary); background: var(--fill-quiet); }
.screen {
display: block;
width: 100%;
height: auto;
border-radius: 9.5% / 4.4%;
box-shadow: 0 0 0 1px var(--border-default), var(--shadow-4);
background: var(--surface-inset);
}
.dev-seq { display: flex; justify-content: center; align-items: flex-start; gap: 0; margin: 40px auto 0; max-width: 640px; padding: 10px 0 12px; }
.dev-seq > div { width: 36%; flex: none; }
.dev-seq > div:nth-child(1) { --rot: -3.5deg; z-index: 1; margin-top: 10px; }
.dev-seq > div:nth-child(2) { --rot: 1.5deg; z-index: 2; margin: 0 -4%; }
.dev-seq > div:nth-child(3) { --rot: 3deg; z-index: 3; margin-top: 6px; }
.dev-seq .frame { --rot: inherit; }
.dev-seq-note { text-align: center; margin: 14px 0 0; }
.steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: 1fr; gap: 26px; }
.steps h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; margin: 8px 0 6px; }
.steps p { font-size: 15.5px; line-height: 1.5; color: var(--text-secondary); }
.attrs { display: grid; grid-template-columns: 1fr; gap: 22px 24px; margin: 30px 0 0; }
.attrs h3 { font-size: 16px; font-weight: 700; margin: 0 0 5px; }
.attrs p { font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); }
.nerd { margin: 24px 0 0; }
.nerd summary {
list-style: none;
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: 15px;
font-weight: 600;
color: var(--accent-text);
cursor: pointer;
}
.nerd summary::-webkit-details-marker { display: none; }
.nerd summary::marker { content: ""; }
.nerd summary::after { content: "→" / ""; margin-left: 6px; }
.nerd[open] summary::after { content: "↑" / ""; }
.nerd-body { margin: 6px 0 0; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--fill-quiet); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.nerd-body p { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.compare-pair { display: flex; align-items: center; gap: 14px; }
.compare-pair figure { flex: 1; min-width: 0; }
.compare-pair .rule { width: 1px; align-self: stretch; background: var(--border-default); }
.compare-pair figcaption { text-align: center; margin-top: 10px; }
.evidence { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.evidence li { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-meta); }
.film-cards { margin: 40px -20px 0; padding: 4px 20px 12px; }
.film-card {
flex: none;
width: min(78vw, 232px);
text-align: left;
cursor: pointer;
padding: 14px;
border-radius: var(--radius-lg);
border: none;
background: var(--fill-quiet);
box-shadow: inset 0 0 0 1px var(--border-subtle);
transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-out);
}
.film-card:hover { background: var(--fill-quiet-hover); }
.film-card.is-on { background: var(--surface-raised); box-shadow: inset 0 0 0 1.5px var(--accent-text), var(--shadow-3); transform: translateY(-4px); }
.film-card .frame { --rot: 0deg; box-shadow: var(--print-shadow); }
.film-head { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.film-name { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); }
.film-dot { width: 9px; height: 9px; border-radius: 50%; margin-left: auto; flex: none; background: var(--film-color, var(--opacifier)); }
.film-card[data-film="600"] { --film-color: #c9a24a; }
.film-card[data-film="sx70"] { --film-color: #7a5b3f; }
.film-card[data-film="itype"] { --film-color: #6e8fa6; }
.film-card[data-film="spectra"] { --film-color: #3a5a6b; }
.film-card[data-film="600-expired"] { --film-color: #8a7a52; }
.film-lede { display: block; font-size: 14.5px; font-weight: 600; color: var(--text-primary); margin: 6px 0 0; }
.film-body { display: block; font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 6px 0 0; text-wrap: pretty; }
.film-meta { display: block; margin: 12px 0 0; }
.film-tag { display: block; margin: 6px 0 0; color: var(--accent-text); }
.compare { margin: 72px auto 0; text-align: center; }
.compare .h2 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.compare .lede { max-width: 560px; margin-left: auto; margin-right: auto; }
.compare-ui { display: flex; flex-direction: column; align-items: center; }
.compare-ui .tabs { order: 2; }
.compare-ui .compare-note { order: 3; }
.compare-stage { order: 1; position: relative; width: min(86vw, 340px); margin: 40px auto 0; }
.compare-stage .frame { --rot: 0deg; opacity: 0; transition: opacity 200ms linear; position: absolute; left: 0; top: 0; width: 100%; }
.compare-stage .frame.is-on { opacity: 1; position: relative; }
.compare-stage .frame:not(.is-on) { pointer-events: none; }
.compare-stage .frame-wide { width: 100%; }
.tabs { margin: 24px 0 0; padding: 4px 0 8px; max-width: 100%; }
.tab {
flex: none;
min-height: 44px;
padding: 0 14px;
border-radius: var(--radius-pill);
border: none;
cursor: pointer;
background: var(--fill-quiet);
box-shadow: inset 0 0 0 1px var(--border-default);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
transition: background var(--dur-fast) var(--ease-standard);
}
.tab:hover { background: var(--fill-quiet-hover); }
.tab.is-on { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.compare-note { margin: 16px 0 0; }
.print-rows { margin: 44px 0 0; display: flex; flex-direction: column; gap: 56px; }
.print-row .row-copy { max-width: 44ch; }
.print-row .row-h { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin: 12px 0 0; text-wrap: balance; }
.print-row .row-p { font-size: 16.5px; line-height: 1.55; color: var(--text-secondary); margin: 12px 0 0; text-wrap: pretty; }
.row-visual { width: min(80vw, 300px); margin: 0 auto; }
.row-visual .frame { --rot: 1.5deg; }
.row-visual .screen { width: min(68vw, 250px); margin: 0 auto; }
.archive { margin: 40px -20px 0; padding: 10px 20px 18px; align-items: flex-start; }
.archive > div { flex: none; width: 236px; }
.archive > div:nth-child(1) { --rot: -3deg; }
.archive > div:nth-child(2) { --rot: 2.5deg; margin-left: -20px; margin-top: 34px; }
.archive > div:nth-child(3) { --rot: -1.5deg; margin-left: -20px; margin-top: 10px; width: 290px; }
.archive .frame { --rot: inherit; }
.memory-cards { margin: 44px 0 0; }
.privacy-rows { margin: 40px 0 0; }
.privacy-rows h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.privacy-rows p { font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); }
.details { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; padding: 22px 20px; }
.details .dot { font-family: var(--font-mono); font-size: 11px; color: var(--border-strong); }
.tiers { margin: 40px 0 0; gap: 14px; align-items: stretch; }
.tier { display: flex; flex-direction: column; padding: 22px; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.tier.is-featured { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border-default); }  
.tier-head { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.tier-name { font-size: 18px; font-weight: 700; }
.tier-flag { margin-left: auto; color: var(--accent-text); }
.tier-price { display: flex; align-items: baseline; gap: 5px; margin-top: 14px; }
.tier-price-n { font-size: 34px; font-weight: 800; letter-spacing: -0.025em; }
.tier-per { font-size: 14.5px; color: var(--text-meta); }
.tier-note { margin-top: 6px; min-height: 16px; }
.tier-benefit { font-size: 15px; font-weight: 600; margin: 16px 0 0; text-wrap: pretty; }
.tier ul { list-style: none; padding: 0; margin: 14px 0 22px; display: flex; flex-direction: column; gap: 7px; }
.tier li { display: flex; gap: 8px; font-size: 14.5px; color: var(--text-secondary); }
.tier li .icon-sm { width: 18px; height: 18px; color: var(--accent-text); margin-top: 2px; }
.tier .btn { margin-top: auto; }
.packs { margin: 26px 0 0; padding: 20px 22px; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.packs h3 { font-size: 17px; font-weight: 600; }
.packs-lines { display: flex; gap: 8px 26px; flex-wrap: wrap; margin: 12px 0 0; font-size: 15.5px; }
.packs-lines b { font-weight: 700; }
.packs p { font-size: 14.5px; color: var(--text-secondary); margin: 12px 0 0; }
.fineprint { font-size: 13px; color: var(--text-meta); line-height: 1.65; margin: 20px 0 0; max-width: 72ch; text-wrap: pretty; }
.fineprint a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.fineprint a:hover { color: var(--text-primary); }
.final { position: relative; overflow: hidden; text-align: center; }
.final-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 50% 100%, rgba(232, 137, 12, 0.14), transparent 62%); }
.cluster { margin: 0 -20px; padding: 6px 20px 20px; align-items: flex-start; }
.cluster > div { flex: none; width: 196px; }
.cluster > div:nth-child(1) { --rot: -5deg; margin-top: 18px; }
.cluster > div:nth-child(2) { --rot: 2deg; margin-left: -22px; }
.cluster > div:nth-child(3) { --rot: -1.5deg; margin-left: -22px; margin-top: 26px; }
.cluster > div:nth-child(4) { --rot: 4deg; margin-left: -22px; margin-top: 6px; }
.cluster .frame { --rot: inherit; }
.final-inner { position: relative; }
.final .h2 { margin-top: 36px; }
.final .lede { max-width: 540px; margin-left: auto; margin-right: auto; }
.final-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 30px 0 0; }
.final-made { color: var(--text-meta); }
.footer { background: var(--surface-sunken); border-top: 1px solid var(--border-subtle); }
.footer-inner { padding: 48px 20px 36px; }
.foot { gap: 26px; grid-template-columns: 1fr 1fr; }
.foot-brand { grid-column: 1 / -1; }
.foot-brand .brand-name { font-size: 18px; }
.foot-brand p { font-size: 14.5px; color: var(--text-secondary); margin: 12px 0 16px; max-width: 30ch; }
.foot-label { display: block; margin: 0 0 14px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-col a { font-size: 14px; color: var(--text-secondary); }
.foot-col a:hover { color: var(--text-primary); }
.foot-col [aria-current] { font-size: 14px; color: var(--text-primary); }
.foot-bar { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-meta); }
.foot-domain { letter-spacing: 0.04em; }
.foot-legal { font-size: 12.5px; color: var(--text-meta); line-height: 1.6; margin: 14px 0 0; max-width: 78ch; text-wrap: pretty; }
.legal-hint { display: inline-block; color: var(--text-meta); font-size: 0.86em; white-space: nowrap; }  
.sticky {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: color-mix(in srgb, var(--surface-overlay) 94%, transparent);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-top: 1px solid var(--border-subtle);
transform: translateY(110%);
visibility: hidden;
transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.sticky.is-show { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.sticky img { border-radius: 7px; flex: none; }
.sticky-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sticky-text b { font-size: 14px; font-weight: 700; }
.sticky-cta { margin-left: auto; min-height: 44px; padding: 0 16px; font-size: 14.5px; font-weight: 700; flex: none; }
.sticky-x { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-secondary); cursor: pointer; }
.lang-menu { position: relative; }
.lang-menu summary {
list-style: none;
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 40px;
padding: 6px 8px;
border-radius: 8px;
border: 1px solid transparent;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::marker { content: ""; }
.lang-menu summary .icon-sm { width: 18px; height: 18px; }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--text-primary); border-color: var(--border-subtle); }
.lang-panel {
position: absolute;
right: 0;
top: calc(100% + 8px);
min-width: 190px;
display: grid;
padding: 6px;
border-radius: 12px;
background: var(--surface-raised);
border: 1px solid var(--border-subtle);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
z-index: 40;
}
.lang-panel a, .lang-panel span { display: block; padding: 12px 10px; border-radius: 8px; font-size: 14px; color: var(--text-secondary); white-space: nowrap; }
.lang-panel a:hover { background: var(--fill-quiet-hover); color: var(--text-primary); text-decoration: none; }
.lang-panel [aria-current] { color: var(--text-primary); font-weight: 600; }
@media (forced-colors: active) {
.tab[aria-selected="true"], .film-card[aria-pressed="true"] { outline: 2px solid; outline-offset: -2px; }
}
@media (prefers-reduced-motion: reduce) {
.film-card, .sticky, .btn, .rise { transition: none; }
.film-card.is-on { transform: none; }
}
.frame {
display: block;
position: relative;
container-type: inline-size;
aspect-ratio: 0.82326;
background: linear-gradient(180deg, var(--paper-100), var(--paper-300) 58%, var(--paper-400));
border-radius: var(--radius-frame);
box-shadow: var(--shadow-photo);
overflow: hidden;
transform: rotate(var(--rot, 0deg));
}
.frame-wide { aspect-ratio: 1.01379; }
.frame-well {
display: block;
position: absolute;
top: 4.43%;
left: 5.38%;
right: 5.38%;
bottom: 24.13%;
background: var(--film-undeveloped);
overflow: hidden;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.07);
}
.frame-wide .frame-well { top: 5.91%; left: 5.88%; right: 5.88%; bottom: 21.77%; }
.frame-well img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform-origin: center;
transform: translate(var(--pan-x, 0), var(--pan-y, 0)) scale(var(--zoom, 1));
}
.frame-well::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 42%);
}
.frame-mono { filter: grayscale(1) brightness(0.6) contrast(1.15); opacity: 0; }
.frame-veil { position: absolute; inset: 0; background: var(--film-undeveloped); opacity: 0; }
.frame-glow {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at 50% 56%, var(--accent-quiet), transparent 68%);
opacity: 0;
}
.frame-stage-0 .frame-veil { opacity: 0.94; }
.frame-stage-0 .frame-mono { opacity: 1; }
.frame-stage-1 .frame-veil { opacity: 0.14; }
.frame-stage-1 .frame-mono { opacity: 0.72; }
.frame-stage-1 .frame-glow { opacity: 0.5; }
.frame-chin {
display: block;
position: absolute;
left: 5.38%;
right: 5.38%;
bottom: 0;
height: 24.13%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 6%;
box-sizing: border-box;
overflow: hidden;
}
.frame-wide .frame-chin { left: 5.88%; right: 5.88%; height: 21.77%; }
.frame-caption {
display: block;
width: 100%;
color: var(--ink-500);
opacity: 0.94;
text-shadow: 0 0.5px 0.6px rgba(0, 0, 0, 0.12);
font-size: clamp(11px, min(12.5cqw, calc(var(--cap-k, 150) * 1cqw / var(--cap-len, 12))), 36px);
line-height: 1.12;
text-align: center;
transform: rotate(-1.5deg);
white-space: nowrap;
overflow: hidden;
}
.hand-marker { font-family: var(--font-hand-marker); --cap-k: 138; }
.hand-ballpoint { font-family: var(--font-hand-ballpoint); --cap-k: 190; }
.hand-cursive { font-family: var(--font-hand-cursive); --cap-k: 118; }
.hand-casual { font-family: var(--font-hand-casual); --cap-k: 185; }
.hand-print { font-family: var(--font-hand-print); --cap-k: 165; }
.slot {
height: 10px;
border-radius: 6px;
background: var(--slot-fill);
box-shadow: var(--slot-shadow);
}
.eject { position: relative; overflow: hidden; padding: 48px 48px 0; margin: -48px -48px 0; }
.eject-move { animation: ic-eject 9s var(--ease-eject) infinite; will-change: transform; }
.frame-loop .frame-veil { opacity: 1; animation: ic-loop-veil 9s var(--ease-develop) infinite; }
.frame-loop .frame-mono { opacity: 1; animation: ic-loop-mono 9s var(--ease-develop) infinite; }
.frame-loop .frame-glow { animation: ic-loop-glow 9s var(--ease-standard) infinite; }
.frame-loop .frame-caption { opacity: 0; animation: ic-loop-cap 9s var(--ease-standard) infinite; }
.dev-state {
display: grid;
line-height: 1.4;
margin: 12px 0 0;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
color: var(--text-meta);
text-align: center;
}
.dev-state span { grid-area: 1 / 1; }
.dev-state span:first-child { animation: ic-state-a 9s steps(1, end) infinite; }
.dev-state span:last-child { opacity: 0; animation: ic-state-b 9s steps(1, end) infinite; }
.hero-print.paused .eject-move, .hero-print.paused .frame-loop .frame-veil, .hero-print.paused .frame-loop .frame-mono,
.hero-print.paused .frame-loop .frame-glow, .hero-print.paused .frame-loop .frame-caption, .hero-print.paused .dev-state span,
.hero-print.offscreen .eject-move, .hero-print.offscreen .frame-loop .frame-veil, .hero-print.offscreen .frame-loop .frame-mono,
.hero-print.offscreen .frame-loop .frame-glow, .hero-print.offscreen .frame-loop .frame-caption, .hero-print.offscreen .dev-state span { animation-play-state: paused; }
@keyframes ic-eject {
0% { transform: translateY(58%); }
9% { transform: translateY(0); }
94% { transform: translateY(0); }
100% { transform: translateY(58%); }
}
@keyframes ic-loop-veil {
0%, 9% { opacity: 1; }
44% { opacity: 0; }
92% { opacity: 0; }
97%, 100% { opacity: 1; }
}
@keyframes ic-loop-mono {
0%, 30% { opacity: 1; }
70% { opacity: 0; }
92% { opacity: 0; }
97%, 100% { opacity: 1; }
}
@keyframes ic-loop-glow {
0%, 8% { opacity: 0; }
16% { opacity: 0.9; }
56% { opacity: 0.35; }
74%, 100% { opacity: 0; }
}
@keyframes ic-loop-cap {
0%, 74% { opacity: 0; }
79%, 93% { opacity: 0.94; }
96%, 100% { opacity: 0; }
}
@keyframes ic-state-a { 0%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes ic-state-b { 0%, 75% { opacity: 0; } 76%, 94% { opacity: 1; } 95%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.eject-move, .frame-loop .frame-veil, .frame-loop .frame-mono, .frame-loop .frame-glow, .frame-loop .frame-caption,
.dev-state span:first-child, .dev-state span:last-child { animation: none; }
.loop-toggle { display: none; }
.frame-loop .frame-veil, .frame-loop .frame-mono, .frame-loop .frame-glow { opacity: 0; }
.frame-loop .frame-caption { opacity: 0.94; }
.dev-state span:first-child { opacity: 0; }
.dev-state span:last-child { opacity: 1; }
}
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.legal-nav { border-bottom: 1px solid var(--border-subtle); }
.legal-nav .brand-name { font-size: 18px; }
.legal-nav-inner { height: 64px; display: flex; align-items: center; gap: 12px; }
.legal-nav-inner .back { margin-left: auto; font-size: 14px; color: var(--text-secondary); min-height: 44px; display: inline-flex; align-items: center; }
.legal-nav-inner .lang-menu { display: block; margin-left: 4px; }
.legal-main { padding: 48px 20px 64px; }
.legal-main h1 { font-size: 34px; letter-spacing: -0.02em; font-weight: 700; }
.legal-updated {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
color: var(--text-meta);
margin: 10px 0 36px;
text-transform: uppercase;
}
.legal-main section { margin: 0 0 34px; }
.legal-main h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; }
.legal-main section p, .legal-main section ul, .legal-main section li { font-size: 15.5px; line-height: 1.65; color: var(--text-secondary); }
.legal-main section p { margin: 0 0 10px; }
.legal-main section p:last-child { margin: 0; }
.legal-main ul { margin: 0; padding-left: 20px; }
.legal-main li { margin-bottom: 8px; }
.legal-main a { color: var(--accent-text); }
.legal-main section p a, .legal-main section li a, .faq p a { text-decoration: underline; text-underline-offset: 2px; }
.legal-main b { color: var(--text-primary); }
.legal-imprint {
margin-top: 48px;
padding-top: 18px;
border-top: 1px solid var(--border-subtle);
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.06em;
color: var(--text-meta);
line-height: 1.6;
}
.faq-nav {
margin: 0 0 44px;
padding: 22px 24px;
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
display: grid;
grid-template-columns: 1fr;
gap: 22px 28px;
}
.faq-nav-label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-meta); margin-bottom: 9px; }
.faq-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.faq-nav a { font-size: 14px; color: var(--text-secondary); line-height: 1.4; }
.faq-nav a:hover { color: var(--accent-text); }
.faq { margin: 0 0 26px; scroll-margin-top: 84px; }
.faq:last-child { margin-bottom: 0; }
.faq h3 { font-size: 17.5px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 7px; color: var(--text-primary); }
.faq p { font-size: 15.5px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 9px; }
.faq p:last-child { margin-bottom: 0; }
.license-list { list-style: none; padding: 0; margin: 0; font-size: 15px; line-height: 1.55; }
.license-list li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); margin: 0; }
.license-list .lname { font-weight: 600; color: var(--text-primary); min-width: 200px; }
.license-list .ldetail { flex: 1; min-width: 220px; color: var(--text-secondary); }
.legal-footnav { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border-subtle); font-size: 14px; color: var(--text-meta); }
.legal-footnav a { color: var(--text-secondary); }
.legal-footnav a:hover { color: var(--text-primary); }
.legal-langnav { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--text-meta); }
.legal-langnav a { color: var(--text-secondary); }
.legal-langnav [aria-current] { color: var(--text-primary); }
.error-page { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; }
.error-page .frame { width: 200px; margin-bottom: 28px; --rot: -3deg; }
.error-code { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em; color: var(--text-tertiary); }
.error-page h1 { font-size: 30px; letter-spacing: -0.02em; margin: 10px 0 8px; }
.error-page p { color: var(--text-secondary); font-size: 16px; margin: 0 0 26px; }
.error-langs { list-style: none; margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border-subtle); display: grid; gap: 10px; font-size: 14px; }
.error-langs a { color: var(--text-secondary); }
.error-langs a:hover { color: var(--text-primary); }
@media (min-width: 601px) {
.legal-wrap { padding: 0 32px; }
.legal-main { padding: 56px 32px 72px; }
.legal-main h1 { font-size: 40px; }
.faq-nav { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px) {
.legal-nav .brand-name { display: none; }
.lang-menu summary .lang-cur { display: none; }
}
html[lang="ja"] {
--font-display: "Hanken Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
--font-mono: "Space Mono", "Hiragino Sans", "Noto Sans JP", ui-monospace, monospace;
}
html[lang="ko"] {
--font-display: "Hanken Grotesk", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
--font-mono: "Space Mono", "Apple SD Gothic Neo", "Noto Sans KR", ui-monospace, monospace;
}
html[lang="ko"] body { word-break: keep-all; }
html[lang="ja"] .eyebrow, html[lang="ko"] .eyebrow, html[lang="ja"] .mono, html[lang="ko"] .mono, html[lang="ja"] .k, html[lang="ko"] .k { letter-spacing: 0.08em; }
html[lang="de"] p:not(.mono), html[lang="fr"] p:not(.mono), html[lang="es"] p:not(.mono), html[lang="it"] p:not(.mono), html[lang="pt-BR"] p:not(.mono), html[lang="ru"] p:not(.mono) { hyphens: auto; -webkit-hyphens: auto; }
.tier, .film-card, .tier-note, .foot-col a, .legal-footnav, .legal-langnav, .btn { overflow-wrap: anywhere; }
html[lang="ja"] .foot-col li, html[lang="ja"] .legal-footnav, html[lang="ja"] .legal-langnav { word-break: break-all; }
html[lang="ja"] .navlink, html[lang="ko"] .navlink { white-space: nowrap; }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] .tier-name, html[lang="ja"] .film-name,
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3 { word-break: keep-all; overflow-wrap: anywhere; }
html[lang="ja"] .h1 { font-size: 34px; line-height: 1.15; }
html[lang="ja"] .h2 { line-height: 1.2; }
@media (min-width: 861px) {
html[lang="ja"] .h1 { font-size: clamp(34px, 10.18cqw, 50px); }
html[lang="ja"] .h2 { font-size: 44px; }
html[lang="fr"] .h1 { font-size: clamp(40px, 10.99cqw, 54px); }
html[lang="es"] .h1, html[lang="pt-BR"] .h1, html[lang="it"] .h1 { font-size: clamp(40px, 12.62cqw, 62px); }
html[lang="ru"] .h1 { font-size: clamp(40px, 11.81cqw, 58px); }
}
html[lang="ja"] {
--font-hand-marker: "Yomogi", "Permanent Marker", cursive;
--font-hand-ballpoint: "Zen Kurenaido", "Reenie Beanie", cursive;
--font-hand-cursive: "Klee One", "Homemade Apple", cursive;
--font-hand-casual: "Yomogi", "Caveat", cursive;
--font-hand-print: "Klee One", "Shadows Into Light", cursive;
}
html[lang="ko"] {
--font-hand-marker: "Gaegu", "Permanent Marker", cursive;
--font-hand-ballpoint: "Nanum Pen Script", "Reenie Beanie", cursive;
--font-hand-cursive: "Nanum Pen Script", "Homemade Apple", cursive;
--font-hand-casual: "Gaegu", "Caveat", cursive;
--font-hand-print: "Nanum Pen Script", "Shadows Into Light", cursive;
}
html[lang="ru"] {
--font-hand-marker: "Neucha", "Permanent Marker", cursive;
--font-hand-ballpoint: "Marck Script", "Reenie Beanie", cursive;
--font-hand-cursive: "Marck Script", "Homemade Apple", cursive;
--font-hand-casual: "Caveat", cursive;
--font-hand-print: "Neucha", "Shadows Into Light", cursive;
}
@media (min-width: 861px) {
.wrap-pad { padding: 0 32px; }
.sec { padding: 120px 32px; }
.sec-lg { padding: 160px 32px; }
.h1 { font-size: clamp(40px, 15.47cqw, 76px); letter-spacing: -0.035em; line-height: 1; margin-top: 20px; }
.h2 { font-size: 52px; letter-spacing: -0.03em; line-height: 1.06; margin-top: 16px; }
.lede { font-size: 20px; margin-top: 22px; }
.lede-follow { margin-top: 12px; }
.g2 { grid-template-columns: repeat(2, 1fr); gap: 36px 32px; }
.g3 { grid-template-columns: repeat(3, 1fr); gap: 32px; }
.g4 { grid-template-columns: repeat(4, 1fr); gap: 28px; }
.stack { grid-template-columns: 1fr 1fr; gap: 48px; }
.tiers { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.foot { grid-template-columns: 2fr 1fr 1fr; gap: 36px; }
.foot-4 { grid-template-columns: 2fr 1fr 1fr 1fr; }
.foot-brand { grid-column: auto; }
.navlinks { gap: 28px; }
.navlink { display: inline-flex; }
.menu-btn, .menu-panel { display: none; }
.sticky { display: none; }
.hero-grid { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 48px; padding: 56px 32px 96px; }
.hero-cta { margin-top: 30px; }
.hero-note { margin-top: 22px; }
.hero-visual { margin: 0; justify-content: center; }
.dev-seq { margin-top: 64px; max-width: 720px; }
.dev-seq > div { width: 240px; }
.dev-seq > div:nth-child(2) { margin: 0 -26px; }
.steps { grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 72px; }
.attrs { grid-template-columns: 1fr 1fr; margin-top: 34px; gap: 24px 28px; }
.film-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 46px 0 0; padding: 6px 0 12px; overflow: visible; }
.film-card { width: auto; padding: 16px; }
.compare { margin-top: 84px; }
.print-rows { margin-top: 64px; gap: 72px; }
.print-row:nth-child(even) .row-copy { order: 2; }
.print-row:nth-child(even) .row-visual { order: 1; }
.print-row .row-h { font-size: 28px; }
.row-visual .screen { width: min(100%, 260px); }
.archive { margin: 52px 0 0; padding: 10px 0 18px; }
.memory-cards { margin-top: 56px; }
.privacy-rows { margin-top: 48px; }
.tiers { margin-top: 46px; }
.packs { margin-top: 34px; }
.cluster { margin: 0; padding: 0 0 20px; }
.final .h2 { margin-top: 44px; }
.footer-inner { padding: 56px 32px 40px; }
.lang-menu { display: block; }
}
@media (max-width: 860px) {
.lang-menu { display: none; }
}
@media (max-width: 400px) {
.brand-name { font-size: 18px; }
}
@media (max-width: 360px) {
.nav-cta { display: none; }  
}
.frame-caption[data-cap-len="1"] { --cap-len: 1; }
.frame-caption[data-cap-len="2"] { --cap-len: 2; }
.frame-caption[data-cap-len="3"] { --cap-len: 3; }
.frame-caption[data-cap-len="4"] { --cap-len: 4; }
.frame-caption[data-cap-len="5"] { --cap-len: 5; }
.frame-caption[data-cap-len="6"] { --cap-len: 6; }
.frame-caption[data-cap-len="7"] { --cap-len: 7; }
.frame-caption[data-cap-len="8"] { --cap-len: 8; }
.frame-caption[data-cap-len="9"] { --cap-len: 9; }
.frame-caption[data-cap-len="10"] { --cap-len: 10; }
.frame-caption[data-cap-len="11"] { --cap-len: 11; }
.frame-caption[data-cap-len="12"] { --cap-len: 12; }
.frame-caption[data-cap-len="13"] { --cap-len: 13; }
.frame-caption[data-cap-len="14"] { --cap-len: 14; }
.frame-caption[data-cap-len="15"] { --cap-len: 15; }
.frame-caption[data-cap-len="16"] { --cap-len: 16; }
.frame-caption[data-cap-len="17"] { --cap-len: 17; }
.frame-caption[data-cap-len="18"] { --cap-len: 18; }
.frame-caption[data-cap-len="19"] { --cap-len: 19; }
.frame-caption[data-cap-len="20"] { --cap-len: 20; }
.frame-caption[data-cap-len="21"] { --cap-len: 21; }
.frame-caption[data-cap-len="22"] { --cap-len: 22; }
.frame-caption[data-cap-len="23"] { --cap-len: 23; }
.frame-caption[data-cap-len="24"] { --cap-len: 24; }
.frame-caption[data-cap-len="25"] { --cap-len: 25; }
.frame-caption[data-cap-len="26"] { --cap-len: 26; }
.frame-caption[data-cap-len="27"] { --cap-len: 27; }
.frame-caption[data-cap-len="28"] { --cap-len: 28; }
.frame-caption[data-cap-len="29"] { --cap-len: 29; }
.frame-caption[data-cap-len="30"] { --cap-len: 30; }
.frame-caption[data-cap-len="31"] { --cap-len: 31; }
.frame-caption[data-cap-len="32"] { --cap-len: 32; }
.frame-caption[data-cap-len="33"] { --cap-len: 33; }
.frame-caption[data-cap-len="34"] { --cap-len: 34; }
.frame-caption[data-cap-len="35"] { --cap-len: 35; }
.frame-caption[data-cap-len="36"] { --cap-len: 36; }
.frame-caption[data-cap-len="37"] { --cap-len: 37; }
.frame-caption[data-cap-len="38"] { --cap-len: 38; }
.frame-caption[data-cap-len="39"] { --cap-len: 39; }
.frame-caption[data-cap-len="40"] { --cap-len: 40; }
.frame-caption[data-cap-len="41"] { --cap-len: 41; }
.frame-caption[data-cap-len="42"] { --cap-len: 42; }
.frame-caption[data-cap-len="43"] { --cap-len: 43; }
.frame-caption[data-cap-len="44"] { --cap-len: 44; }
.frame-caption[data-cap-len="45"] { --cap-len: 45; }
.frame-caption[data-cap-len="46"] { --cap-len: 46; }
.frame-caption[data-cap-len="47"] { --cap-len: 47; }
.frame-caption[data-cap-len="48"] { --cap-len: 48; }