:root {
  --night: #17172d;
  --deep: #101022;
  --panel: #22213e;
  --paper: #fff6e7;
  --ink: #1c1b31;
  --pink: #ff93b8;
  --lavender: #b9a5f3;
  --mint: #b8e4db;
  --yellow: #f2dba7;
  --muted: #c0bbd0;
  --line: rgba(255,246,231,.17);
  --display: "Arial Black", "Segoe UI", Arial, sans-serif;
  --body: "Segoe UI", Arial, sans-serif;
  --max: 1280px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; overflow-x:clip; }
body { margin: 0; font: 16px/1.65 var(--body); color: var(--paper); background: var(--night); overflow-x: clip; }
body::before { content:""; position:absolute; left:0; top:0; width:100%; height:1000px; z-index:-1; background:radial-gradient(ellipse at 78% 40%,#3c2d58 0,transparent 47%),radial-gradient(ellipse at 5% 5%,#24213d,transparent 60%); }
::selection { color: var(--ink); background: var(--pink); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img,svg { display: block; max-width: 100%; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: var(--display); }
i { font-style: normal; }
em { font-style: italic; font-family: Georgia,"Times New Roman",serif; font-weight: 500; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 6px; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:300; background:var(--paper); color:var(--ink); padding:12px 20px; border-radius:6px; }
.skip-link:focus { top:12px; }
.scroll-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:200; }
.scroll-progress span { display:block; height:100%; background:var(--pink); transform:scaleX(var(--scroll-progress,0)); transform-origin:left; }
.site-header { position:relative; z-index:90; height:100px; display:flex; align-items:center; gap:32px; width:min(var(--max),calc(100% - 80px)); margin:auto; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.brand-emblem { display:grid; place-items:center; width:51px; height:51px; border:2px solid var(--paper); border-radius:14px; background:var(--pink); box-shadow:3px 3px 0 var(--paper); transition:background .2s, translate .2s; }
.brand:hover .brand-emblem { background:var(--lavender); translate:0 -3px; }
.brand-mark { width:37px; height:37px; fill:var(--ink); }
.brand-name { font-size:20px; font-weight:900; letter-spacing:.13em; line-height:1.1; }
.brand-name small { display:block; margin-top:7px; font-size:12px; font-weight:600; letter-spacing:.12em; color:var(--muted); }
.desktop-nav { display:flex; gap:29px; margin-left:auto; }
.desktop-nav a { position:relative; font-size:13px; font-weight:650; white-space:nowrap; }
.desktop-nav a span { position:absolute; top:-10px; right:-10px; font-size:12px; color:var(--lavender); }
.desktop-nav a::after { content:""; position:absolute; bottom:-5px; left:0; width:100%; height:2px; background:var(--pink); transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.desktop-nav a:hover::after,.desktop-nav a.active::after { transform:scaleX(1); }
.header-cta { display:flex; align-items:center; gap:20px; padding:10px 18px; border:1px solid var(--paper); border-radius:7px; font-size:12px; font-weight:700; transition:background .2s,color .2s; }
.header-cta:hover { color:var(--ink); background:var(--paper); }
.header-cta span { font-size:23px; line-height:1; color:var(--pink); }
.menu-toggle { display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:6px; background:transparent; padding:10px; }
.menu-toggle span { display:block; height:2px; background:var(--paper); margin:6px 0; transition:transform .2s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-4px) rotate(-45deg); }

.hero { position:relative; isolation:isolate; width:min(var(--max),calc(100% - 80px)); margin:auto; }
.hero-grid { position:absolute; z-index:-1; inset:0 -80px; opacity:.065; background-image:linear-gradient(var(--paper) 1px,transparent 1px),linear-gradient(90deg,var(--paper) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(transparent,#000 40%,transparent); }
.hero-orbit { position:absolute; z-index:-1; top:100px; right:-5%; width:650px; height:650px; border:1px dashed rgba(185,165,243,.16); border-radius:50%; animation:spin 90s linear infinite; }
.hero-orbit::after { content:""; position:absolute; left:16%; top:2%; width:25px; height:25px; background:var(--pink); clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); animation:star-twinkle 5s ease-in-out infinite,star-sway 8s ease-in-out infinite; }
.hero-topline { display:flex; justify-content:space-between; padding:24px 0; font-size:12px; letter-spacing:.16em; color:var(--muted); }
.hero-topline i { margin-left:15px; color:var(--pink); }
.hero-layout { display:grid; grid-template-columns:1.08fr 1fr; gap:45px; align-items:center; min-height:650px; padding:30px 0 50px; }
.hero-copy { position:relative; z-index:5; }
.eyebrow { display:flex; align-items:center; gap:9px; width:max-content; font-size:12px; letter-spacing:.13em; font-weight:700; color:var(--mint); margin-bottom:26px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(184,228,219,.08); animation:status-pulse 3s ease-in-out infinite; }
.hero h1 { margin:0 0 27px; font-size:clamp(52px,5.65vw,83px); line-height:1.08; letter-spacing:-.045em; font-weight:900; }
.title-highlight { position:relative; display:inline-block; font:italic 1.15em/.95 Georgia,serif; color:var(--pink); letter-spacing:-.05em; }
.title-highlight svg { position:absolute; left:0; bottom:-17px; width:100%; height:20px; fill:none; stroke:var(--pink); stroke-width:3; stroke-linecap:round; }
.hero-copy>p { max-width:445px; margin-bottom:30px; color:var(--muted); font-size:15px; line-height:1.8; }
.hero-copy p strong { color:var(--paper); font-weight:600; }
.hero-actions { display:flex; gap:25px; align-items:center; }
.button { position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:27px; padding:16px 22px; border:2px solid var(--ink); border-radius:7px; color:var(--ink); background:var(--pink); box-shadow:4px 4px 0 var(--paper); font-size:12px; font-weight:800; line-height:1.3; transition:background .22s,translate .22s,box-shadow .22s; }
.button span { font-size:23px; font-weight:400; line-height:.8; transition:translate .22s; }
.button:hover { background:var(--lavender); translate:-2px -2px; box-shadow:6px 6px 0 var(--paper); }
.button:hover span { translate:3px -2px; }
.button:active { translate:2px 2px; box-shadow:1px 1px 0 var(--paper); }
.text-link { display:inline-flex; gap:10px; align-items:center; font-size:12px; color:var(--paper); border-bottom:1px solid var(--line); padding:8px 0; }
.text-link span { color:var(--pink); font-size:18px; transition:translate .2s; }
.text-link:hover span { translate:0 4px; }
.hero-note { display:flex; align-items:center; gap:15px; margin:27px 0 28px 165px; color:var(--lavender); }
.hero-note svg { width:56px; height:50px; fill:none; stroke:var(--lavender); stroke-width:2; stroke-linecap:round; }
.hero-note span { font:italic 17px/1.3 Georgia,serif; }
.hero-chips { display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-size:12px; letter-spacing:.12em; font-weight:600; }
.hero-chips i { color:var(--pink); font-size:15px; }
.hero-art { position:relative; height:570px; margin:5px 8px 10px 0; }
.art-backplate { position:absolute; inset:8% -11px -10px 20px; background:var(--lavender); border:2px solid var(--ink); border-radius:160px 160px 13px 13px; transform:rotate(4deg); }
.art-frame { position:relative; width:100%; height:100%; border:2px solid var(--paper); border-radius:180px 180px 10px 10px; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 50% 85%,#674179,transparent 65%),linear-gradient(135deg,#272644,#454365); }
.art-halftone { position:absolute; inset:0; background-image:radial-gradient(var(--paper) .8px,transparent .8px); background-size:7px 7px; opacity:.11; mask-image:linear-gradient(transparent,#000); }
.hero-moon { position:absolute; top:8%; right:5%; width:66%; aspect-ratio:1; border-radius:50%; background:var(--yellow); border:2px solid var(--ink); box-shadow:10px 10px 0 rgba(255,147,184,.28); }
.hero-moon::after { content:""; position:absolute; inset:12px; border:1px dashed rgba(28,27,49,.26); border-radius:50%; }
.moon-orbit { position:absolute; top:2%; right:-3%; width:85%; aspect-ratio:1; border:1px solid rgba(255,246,231,.28); border-radius:50%; transform:rotate(-35deg) scaleY(.78); }
.hero-character-wrap { position:absolute; inset:0; z-index:3; pointer-events:none; isolation:isolate; }
.mai-figure { position:absolute; top:24px; left:50%; width:72%; max-width:350px; aspect-ratio:272/904; overflow:hidden; transform:translateX(-50%); pointer-events:none; }
.mai-figure>img { position:absolute; top:0; left:-142.647%; width:360.294%; max-width:none; height:auto; display:block; }
.mai-chibi { position:absolute; inset:14px 0 58px; display:flex; align-items:center; justify-content:center; }
.mai-chibi>canvas,.mai-chibi>img { position:relative; z-index:1; display:block; width:auto; height:auto; max-width:min(78%,350px); max-height:100%; object-fit:contain; }
.mai-chibi>[hidden] { display:none!important; }
.mai-chibi::after { content:""; position:absolute; bottom:5px; left:50%; width:38%; height:12px; border-radius:50%; background:rgba(10,10,30,.25); filter:blur(3px); translate:-50% 0; animation:chibi-shadow 3.8s ease-in-out infinite; }
.chibi-credit { position:absolute; z-index:4; left:50%; bottom:54px; translate:-50% 0; width:max-content; max-width:95%; color:var(--paper); opacity:.7; font-size:12px; font-weight:700; letter-spacing:.05em; pointer-events:auto; text-decoration:underline; text-underline-offset:3px; }
.chibi-credit:hover,.chibi-credit:focus-visible { opacity:1; }
@keyframes chibi-shadow { 0%,100% { scale:1; opacity:.75; } 50% { scale:.9; opacity:.5; } }
.scene-star { position:absolute; z-index:4; color:var(--paper); font-size:33px; animation:star-float 5s ease-in-out infinite; }
.star-a { left:9%; top:29%; color:var(--pink); }
.star-b { right:7%; top:43%; animation-delay:-2s; font-size:45px; }
.star-c { left:16%; bottom:17%; font-size:18px; animation-delay:-1s; }
.art-caption { position:absolute; z-index:4; top:33%; left:6%; writing-mode:vertical-rl; font-size:12px; letter-spacing:.18em; color:var(--paper); opacity:.7; }
.scene-bottom { position:absolute; z-index:5; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:rgba(23,23,45,.85); border-top:1px solid rgba(255,246,231,.25); }
.scene-bottom>span { font-size:17px; }
.scene-bottom small { font-size:12px; letter-spacing:.1em; margin-left:9px; vertical-align:middle; }
.scene-bottom>span:last-child { font:12px monospace; }
.scene-bottom i { color:var(--pink); margin-left:7px; font-size:12px; }
.floating-tag { position:absolute; z-index:6; color:var(--ink); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); animation:tag-float 6s ease-in-out infinite; }
.tag-a { top:11%; left:-31px; padding:13px 18px 15px; background:var(--pink); border-radius:10px 10px 10px 1px; transform:rotate(-8deg); font:italic 22px/1.12 Georgia,serif; }
.tag-a strong { font:900 27px/1 var(--display); letter-spacing:-.03em; }
.tag-a>.tag-spark { position:absolute; top:-17px; right:2px; color:var(--paper); font-size:24px; }
.tag-b { right:-24px; bottom:15%; padding:13px 14px; background:var(--mint); border-radius:5px; font-size:12px; font-weight:800; letter-spacing:.07em; transform:rotate(4deg); animation-delay:-3s; }
.tag-b>.tag-icon { margin-right:9px; font-size:19px; line-height:.8; }
.art-seal { position:absolute; z-index:6; left:-30px; bottom:1%; width:144px; padding:0; display:grid; background:var(--paper); color:var(--ink); border:3px solid var(--ink); border-radius:23px 23px 23px 8px; box-shadow:5px 6px 0 var(--ink); transform:rotate(-8deg); animation:sticker-bob 6.5s ease-in-out infinite; }
.art-seal:hover,.art-seal:focus-visible { rotate:3deg; box-shadow:7px 8px 0 var(--ink); }
.seal-center { display:flex; align-items:center; justify-content:center; gap:7px; padding:16px 9px 14px; }
.seal-symbol { display:grid; place-items:center; flex-shrink:0; width:43px; height:43px; background:var(--pink); border:1.5px solid var(--ink); border-radius:50%; }
.seal-symbol svg { width:33px; height:33px; fill:var(--ink); }
.seal-label { text-align:left; font:900 13px/1.16 var(--display); letter-spacing:-.025em; }
.seal-name { display:block; padding:8px 4px; border-top:2px solid var(--ink); border-radius:0 0 19px 5px; background:var(--lavender); text-align:center; font-size:12px; font-weight:800; line-height:1.25; letter-spacing:.09em; }
.hero-bottom { display:flex; justify-content:space-between; align-items:center; padding:24px 0 33px; font-size:12px; letter-spacing:.14em; color:var(--muted); }
.hero-bottom a { display:flex; gap:15px; align-items:center; color:var(--paper); }
.hero-bottom a span { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--line); border-radius:50%; color:var(--pink); font-size:14px; animation:arrow-nudge 2s ease-in-out infinite; }

.marquee { overflow:hidden; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); background:var(--lavender); color:var(--ink); padding:19px 0; }
.marquee-track { display:flex; align-items:center; gap:36px; width:max-content; animation:marquee 35s linear infinite; }
.marquee span { font:900 15px/1 var(--display); letter-spacing:.06em; white-space:nowrap; }
.marquee i { font-size:25px; line-height:1; }

.section { position:relative; width:min(var(--max),calc(100% - 80px)); margin:auto; padding:110px 0; }
.section-label { display:flex; align-items:center; gap:12px; margin-bottom:22px; font-size:12px; letter-spacing:.15em; font-weight:700; color:var(--muted); }
.section-label>span { padding:3px 7px; border:1px solid var(--line); border-radius:3px; color:var(--pink); font-size:12px; letter-spacing:0; }
.section h2 { font-size:clamp(38px,4.3vw,61px); line-height:1.12; letter-spacing:-.04em; margin-bottom:0; font-weight:900; }
.section h2 em { color:var(--pink); font-size:1.12em; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:36px; margin-bottom:50px; }
.section-heading>p,.heading-aside>p { font-size:13px; line-height:1.7; color:var(--muted); margin-bottom:0; }
.heading-aside { max-width:310px; }
.outline-pill { display:inline-block; padding:7px 11px; border:1px solid var(--line); border-radius:30px; font-size:12px; letter-spacing:.12em; font-weight:700; }
.heading-aside .outline-pill { margin-top:16px; color:var(--lavender); }
.heading-star { display:inline-block; font-size:.65em; vertical-align:middle; color:var(--lavender); margin-left:25px; animation:star-float 6s ease-in-out infinite; }
.projects { padding-bottom:100px; }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:37px 28px; }
.project-wide { grid-column:1/-1; }
.project-card { min-width:0; }
.project-visual { position:relative; overflow:hidden; height:380px; border:2px solid var(--ink); border-radius:11px; isolation:isolate; box-shadow:6px 6px 0 #080815; transition:translate .3s,box-shadow .3s; }
.project-card:hover .project-visual { translate:0 -5px; box-shadow:8px 11px 0 #080815; }
.project-wide .project-visual { height:420px; }
.visual-one { background:var(--pink); color:var(--ink); }
.visual-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(28,27,49,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(28,27,49,.09) 1px,transparent 1px); background-size:44px 44px; animation:grid-drift 18s linear infinite; }
.project-category { position:absolute; left:22px; top:20px; z-index:4; font-size:12px; font-weight:800; letter-spacing:.1em; }
.visual-comic { position:absolute; width:44%; height:80%; top:10%; left:9%; transform:rotate(-7deg); pointer-events:none; }
.comic-burst { width:100%; height:100%; fill:var(--yellow); stroke:var(--ink); stroke-width:2.5; overflow:visible; }
/* The nested SVG frame keeps the old wide silhouette while its spikes spin. */
.comic-spikes { transform-box:view-box; transform-origin:0 0; animation:spin 14s linear infinite,comic-spikes-pulse 3.2s ease-in-out infinite; }
.visual-comic>span { position:absolute; inset:0; z-index:2; display:grid; place-items:center; font:italic 900 clamp(80px,11vw,155px)/1 var(--display); letter-spacing:-.06em; padding-right:8%; }
.visual-comic::after { content:""; position:absolute; top:4%; left:-9%; width:115%; height:100%; z-index:-1; background-image:radial-gradient(var(--ink) 1.5px,transparent 1.5px); background-size:6px 6px; opacity:.45; border-radius:50%; animation:comic-halftone-pulse 4.2s ease-in-out infinite; }
.mini-timeline { position:absolute; top:32%; right:7%; width:29%; height:39%; display:flex; flex-direction:column; gap:10px; padding:20px; border:2px solid var(--ink); border-radius:9px; background:var(--ink); transform:rotate(6deg); }
.mini-timeline span { display:block; height:15px; border:1px solid var(--paper); background:var(--lavender); width:75%; border-radius:3px; }
.mini-timeline span:nth-child(2) { background:var(--mint); width:92%; margin-left:8%; }
.mini-timeline span:nth-child(3) { background:var(--pink); width:64%; margin-left:12%; }
.mini-timeline span:nth-child(4) { background:var(--yellow); width:80%; }
.mini-timeline span:nth-child(5) { background:var(--lavender); width:50%; margin-left:34%; }
.mini-timeline i { position:absolute; top:7%; bottom:7%; left:20%; width:2px; background:var(--paper); animation:playhead 5s ease-in-out infinite alternate; }
.visual-caption { position:absolute; bottom:20px; left:22px; font-size:12px; font-weight:800; letter-spacing:.12em; }
.project-play { position:absolute; z-index:5; right:20px; bottom:20px; width:49px; height:49px; display:grid; place-items:center; background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:50%; box-shadow:3px 3px 0 var(--ink); font-size:25px; line-height:1; transition:background .2s,translate .2s; }
.project-play:hover { background:var(--yellow); translate:0 -3px; }
.visual-two { background:var(--lavender); color:var(--ink); }
.visual-two::after { content:""; position:absolute; inset:0; background-image:radial-gradient(var(--ink) 1px,transparent 1px); background-size:6px 6px; opacity:.15; mask-image:linear-gradient(90deg,transparent 30%,#000); }
.visual-word { position:absolute; z-index:2; top:24%; left:7%; font:900 clamp(39px,5vw,65px)/.96 var(--display); letter-spacing:-.03em; }
.visual-word em { font-size:1.1em; }
.motion-flower { position:absolute; top:13%; right:1%; width:55%; aspect-ratio:1; display:grid; place-items:center; color:var(--pink); -webkit-text-stroke:2px var(--ink); }
.motion-flower span { font-size:270px; line-height:1; animation:spin 28s linear infinite; }
.visual-three { background:var(--yellow); color:var(--ink); }
.long-video-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.long-video-visual::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(16,16,34,.2),transparent 45%,rgba(16,16,34,.25)); }
.long-video-visual .project-category { background:var(--paper); padding:8px 12px; border:2px solid var(--ink); border-radius:6px; }
.long-video-label { position:absolute; z-index:2; bottom:20px; left:22px; display:flex; align-items:center; gap:10px; padding:8px 12px; border:2px solid var(--ink); border-radius:6px; color:var(--ink); background:var(--yellow); box-shadow:3px 3px 0 var(--ink); font-size:12px; line-height:1.4; letter-spacing:.08em; font-weight:800; }
.long-video-label i { font-size:18px; }
.story-panel { position:absolute; right:5%; top:19%; width:49%; height:65%; border:2px solid var(--ink); border-radius:100px 100px 4px 4px; background:#474063; overflow:hidden; transform:rotate(7deg); }
.story-moon { position:absolute; top:13%; left:25%; width:50%; aspect-ratio:1; background:var(--paper); border:2px solid var(--ink); border-radius:50%; animation:moon-bob 7s ease-in-out infinite; }
.story-hill { position:absolute; left:-70%; bottom:-35%; width:240%; height:68%; background:var(--lavender); border:2px solid var(--ink); border-radius:50%; transform:rotate(-16deg); }
.story-hill::after { content:""; position:absolute; top:32%; width:100%; height:100%; border-radius:50%; background:var(--pink); border-top:2px solid var(--ink); transform:rotate(15deg); }
.story-star { position:absolute; right:10%; top:5%; font-size:32px; color:var(--pink); animation:star-float 4s ease-in-out infinite; }
.project-meta { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:19px 4px 0; }
.project-meta>div>span { display:block; color:var(--lavender); font-size:12px; letter-spacing:.1em; font-weight:700; }
.project-meta h3 { font:650 17px/1.4 var(--body); margin:6px 0 0; }
.project-state { display:flex; align-items:center; gap:15px; color:var(--muted); font-size:12px; letter-spacing:.1em; white-space:nowrap; }
.project-state i { font-size:19px; }
.shorts-browser-bar { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1080px; margin:34px auto 20px; }
.video-library-heading>span { color:var(--lavender); font-size:12px; font-weight:800; letter-spacing:.12em; }
.video-library-heading>p { margin:6px 0 0; font:750 22px/1.3 var(--body); }
.video-filters { display:flex; flex-wrap:wrap; gap:9px; }
.video-filters button { display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid var(--line); border-radius:9px; color:var(--paper); background:var(--panel); font-size:12px; font-weight:700; transition:translate .2s,background .2s,box-shadow .2s; }
.video-filters button span { display:grid; place-items:center; min-width:21px; height:21px; padding:0 4px; border-radius:6px; background:rgba(255,246,231,.12); font-size:12px; }
.video-filters button:hover { translate:0 -2px; }
.video-filters button[aria-pressed="true"] { color:var(--ink); background:var(--lavender); border-color:var(--ink); box-shadow:3px 3px 0 var(--paper); }
.video-filters button[aria-pressed="true"] span { background:rgba(28,27,49,.1); }
.shorts-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 26px; width:100%; max-width:1080px; margin-inline:auto; }
.shorts-gallery[data-filter="instagram"] { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:720px; }
.short-video-card { --video-accent:var(--pink); display:flex; flex-direction:column; min-width:0; overflow:hidden; border:2px solid var(--ink); border-radius:15px; color:var(--ink); background:var(--paper); box-shadow:5px 5px 0 var(--video-accent); transition:translate .25s ease,box-shadow .25s ease; }
.short-video-card[hidden] { display:none; }
.short-video-card:nth-child(4n+2) { --video-accent:var(--mint); }
.short-video-card:nth-child(4n+3) { --video-accent:var(--lavender); }
.short-video-card:nth-child(4n) { --video-accent:var(--yellow); }
.short-video-card:hover,.short-video-card:focus-visible { translate:0 -6px; box-shadow:7px 11px 0 var(--video-accent); }
.short-video-preview { position:relative; width:100%; aspect-ratio:9/16; overflow:hidden; border-bottom:2px solid var(--ink); background:var(--deep); }
.short-video-preview img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; transition:scale .4s ease; }
.short-video-preview::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(16,16,34,.2),transparent 35%,rgba(16,16,34,.25)); }
.short-video-preview::after { content:""; position:absolute; left:50%; top:50%; z-index:2; width:72px; height:72px; border:3px solid var(--ink); border-radius:50%; background-color:var(--paper); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5l12 7-12 7Z' fill='%231c1b31'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:23px 23px; box-shadow:4px 5px 0 var(--video-accent); transform:translate(-50%,-50%) rotate(-6deg); transition:transform .3s ease,background-color .3s ease,box-shadow .3s ease; }
.short-video-card:hover img,.short-video-card:focus-visible img { scale:1.035; }
.short-video-card:hover .short-video-preview::after,.short-video-card:focus-visible .short-video-preview::after { transform:translate(-50%,-50%) rotate(3deg) scale(1.08); background-color:var(--video-accent); box-shadow:4px 5px 0 var(--paper); }
.short-video-number { position:absolute; z-index:3; top:12px; right:12px; display:grid; place-items:center; width:29px; height:29px; border:2px solid var(--ink); border-radius:8px; background:var(--video-accent); color:var(--ink); font-size:12px; font-weight:800; }
.short-video-copy { display:flex; flex-direction:column; align-items:flex-start; flex:1; padding:17px 16px; min-width:0; }
.short-video-kicker { font-size:12px; line-height:1.5; letter-spacing:.08em; font-weight:800; color:#71537f; }
.short-video-copy h4 { min-height:4.05em; margin:10px 0 0; font:800 18px/1.35 var(--body); overflow-wrap:anywhere; }
.short-video-action { display:grid; grid-template-columns:44px minmax(0,1fr) 24px; align-items:center; gap:10px; width:100%; min-height:68px; margin-top:auto; padding:10px; border:2px solid var(--ink); border-radius:11px; color:var(--ink); background:var(--video-accent); box-shadow:3px 3px 0 var(--ink); font-size:13px; font-weight:750; text-align:left; }
.platform-mark { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border:2px solid var(--ink); border-radius:10px; background:var(--paper); box-shadow:2px 2px 0 var(--ink); }
.platform-mark svg { display:block; width:30px; height:30px; }
.video-action-copy { display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; line-height:1.2; }
.video-action-copy strong { font:800 16px/1.2 var(--body); }
.video-action-copy small { font-size:12px; font-weight:800; letter-spacing:.04em; }
.video-watch-button { position:absolute; z-index:4; left:12px; right:12px; bottom:14px; width:auto; margin:0; transition:translate .25s,box-shadow .25s; }
.short-video-card:hover .video-watch-button { translate:0 -2px; box-shadow:4px 5px 0 var(--ink); }
.video-filters .platform-mark { width:24px; height:24px; min-width:24px; padding:0; border:0; background:transparent; box-shadow:none; }
.video-filters .platform-mark svg { width:24px; height:24px; }
.short-video-action i { display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--ink); border-radius:50%; background:var(--video-accent); font-size:14px; transition:rotate .25s ease; }
.short-video-card:hover .short-video-action i { rotate:45deg; }
.motion-gallery { display:grid; grid-column:1/-1; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 26px; width:100%; max-width:1080px; margin:0 auto; }
.motion-gallery-heading { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.motion-gallery-heading strong { font:750 21px/1.3 var(--body); }
.motion-gallery-heading span { color:var(--lavender); font-size:12px; letter-spacing:.08em; font-weight:800; }
.landscape-video-card .short-video-preview { aspect-ratio:16/9; }
.landscape-video-card .short-video-preview::after { width:43px; height:43px; border-width:2px; background-size:17px 17px; box-shadow:3px 3px 0 var(--video-accent); }
.landscape-video-card .short-video-number { width:23px; height:23px; top:8px; right:8px; font-size:12px; }
.landscape-video-card .short-video-copy { padding:17px 16px; gap:10px; }
.landscape-video-card .short-video-copy h4 { font-size:18px; }
@media(min-width:681px) and (max-width:1100px) { .shorts-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:740px; } .shorts-browser-bar { max-width:740px; align-items:flex-start; flex-direction:column; gap:16px; } .motion-gallery { grid-template-columns:1fr 1fr; } }
.projects-footnote { text-align:center; color:var(--muted); font-size:12px; margin:35px 0 0; }

.about { width:100%; padding:105px max(40px,calc((100% - var(--max))/2)); background:var(--paper); color:var(--ink); overflow:hidden; }
.about::before { content:""; position:absolute; inset:0; background-image:radial-gradient(var(--ink) .7px,transparent .7px); background-size:8px 8px; opacity:.07; mask-image:linear-gradient(90deg,#000,transparent 60%); }
.about-layout { position:relative; display:grid; grid-template-columns:1fr 1.05fr; gap:100px; align-items:center; }
.about-art { position:relative; max-width:470px; margin:0 15px; }
.about-paper { position:relative; padding:15px 15px 8px; background:#fffdfa; border:2px solid var(--ink); box-shadow:9px 9px 0 var(--lavender); transform:rotate(-5deg); transition:rotate .4s; }
.about-art:hover .about-paper { rotate:2deg; }
.about-photo { position:relative; height:400px; overflow:hidden; border:1px solid var(--ink); background:radial-gradient(ellipse at 50% 45%,#514164,var(--panel) 78%); }
.about-photo .mai-figure { width:72%; top:22px; }
.paper-tape { position:absolute; z-index:4; top:-16px; left:35%; width:120px; height:32px; background:rgba(242,219,167,.85); clip-path:polygon(0 10%,100% 0,97% 92%,2% 100%); transform:rotate(-5deg); }
.paper-caption { display:flex; align-items:center; justify-content:space-between; padding:14px 0 7px; font-size:12px; letter-spacing:.07em; font-weight:800; }
.paper-caption i { font-size:23px; }
.character-credit { display:block; margin-top:5px; color:#7d5ba6; font-size:12px; letter-spacing:.02em; text-decoration:underline; text-underline-offset:2px; }
.experience-sticker { position:absolute; right:-38px; bottom:-27px; width:139px; height:139px; padding:12px 8px; border:2px solid var(--ink); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--ink); background:var(--pink); box-shadow:4px 4px 0 var(--ink); transform:rotate(8deg); animation:experience-idle 6s ease-in-out infinite; transition:background .2s,rotate .2s,box-shadow .2s; }
.experience-sticker:hover,.experience-sticker:focus-visible { background:var(--yellow); rotate:-3deg; box-shadow:6px 7px 0 var(--ink); }
.experience-sticker:focus-visible { outline:3px solid var(--ink); outline-offset:6px; }
.experience-sticker:active { animation:none; scale:.92 1.08; }
.experience-sticker.is-bouncing { animation:sticker-elastic .85s ease-out both; }
.experience-sticker strong { font:900 52px/1 var(--display); letter-spacing:-.055em; }
.experience-sticker span { font-size:12px; font-weight:800; letter-spacing:.06em; line-height:1.5; text-align:center; margin-top:9px; }
.about-doodle { position:absolute; top:-40px; right:-42px; color:var(--ink); font-size:70px; line-height:1; animation:star-float 6s ease-in-out infinite; }
.about .section-label { color:#676173; }
.about .section-label>span { color:var(--ink); border-color:#cfc6ce; }
.about h2 { margin-bottom:26px; }
.about h2 em { color:#7d5ba6; }
.about-copy>p { color:#635d6d; font-size:14px; line-height:1.85; margin-bottom:17px; }
.about-copy>p.lead { color:var(--ink); font-size:18px; line-height:1.65; }
.about-quote { margin:24px 0; padding:16px 20px; border-left:4px solid #7d5ba6; border-radius:0 10px 10px 0; background:rgba(185,165,243,.17); }
.about-quote p { margin:0; color:var(--ink); font:500 16px/1.65 var(--body); }
.about-quote strong { color:#6c4a95; font-weight:800; }
.about-signature { display:flex; align-items:center; gap:24px; margin-top:28px; padding-top:25px; border-top:1px solid #d6cdcf; }
.about-signature>span { font:italic 29px Georgia,serif; }
.about-signature>i { color:#7d5ba6; font-size:32px; }
.about-signature small { font-size:12px; letter-spacing:.12em; color:#635d6d; line-height:1.8; }

.services { padding-bottom:90px; }
.service-list { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.service-card { position:relative; display:flex; flex-direction:column; min-height:350px; padding:26px; border:2px solid var(--ink); border-radius:10px; background:var(--lavender); color:var(--ink); box-shadow:5px 5px 0 #080815; overflow:hidden; transition:translate .3s,box-shadow .3s; }
.service-card:nth-child(2) { background:var(--pink); }
.service-card:nth-child(3) { background:var(--mint); }
.service-card:hover,html.motion-ready .service-card.visible:hover { translate:0 -7px; box-shadow:8px 12px 0 #080815; }
.service-card::before { content:""; position:absolute; top:var(--spot-y,50%); left:var(--spot-x,50%); width:170px; height:170px; transform:translate(-50%,-50%); border-radius:50%; background:rgba(255,246,231,.15); opacity:0; transition:opacity .2s; pointer-events:none; }
.service-card:hover::before { opacity:1; }
.service-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:36px; }
.service-number { display:grid; place-items:center; width:31px; height:31px; border:1px solid var(--ink); border-radius:50%; font-size:12px; }
.service-top svg { width:63px; height:63px; fill:none; stroke:var(--ink); stroke-width:2.3; stroke-linejoin:round; stroke-linecap:round; transition:transform .3s; }
.service-card:hover .service-top svg { transform:rotate(-8deg) scale(1.08); }
.service-card h3 { font:750 21px/1.22 var(--body); letter-spacing:-.035em; margin-bottom:17px; }
.service-card p { font-size:12px; line-height:1.75; color:#494157; margin:0 0 24px; }
.service-foot { display:flex; justify-content:space-between; align-items:center; padding-top:15px; margin-top:auto; border-top:1px solid rgba(28,27,49,.3); font-size:12px; letter-spacing:.09em; font-weight:800; }
.service-foot i { font-size:22px; transition:translate .2s; }
.service-card:hover .service-foot i { translate:3px -3px; }

.process { padding-top:35px; padding-bottom:110px; }
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); padding:0; margin:0; list-style:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.process-steps li { position:relative; padding:25px 25px 30px 0; min-height:220px; border-right:1px solid var(--line); transition:background .2s; }
.process-steps li+li { padding-left:25px; }
.process-steps li:last-child { border-right:0; }
.process-steps li:hover { background:rgba(185,165,243,.04); }
.process-steps>li>span { display:block; font:italic 32px/1 Georgia,serif; color:var(--lavender); margin-bottom:34px; }
.process-steps h3 { font:650 15px/1.3 var(--body); margin-bottom:10px; }
.process-steps p { font-size:12px; line-height:1.65; color:var(--muted); margin:0; }
.process-steps>li>i { position:absolute; right:22px; top:24px; color:var(--pink); font-size:25px; }

.contact { width:calc(100% - 36px); max-width:calc(var(--max) + 44px); padding:85px 65px; background:var(--lavender); color:var(--ink); border:2px solid var(--ink); border-radius:18px; display:flex; justify-content:space-between; align-items:center; gap:25px; overflow:hidden; }
.contact .section-label { color:#514363; }
.contact .section-label>span { border-color:#76658d; color:var(--ink); }
.contact h2 { font-size:clamp(43px,5.6vw,79px); }
.contact h2 em { color:var(--ink); }
.contact h2>span { display:inline-block; margin-left:18px; color:var(--paper); }
.contact p { margin:24px 0 28px; color:#4f435e; font-size:14px; }
.contact .button { background:var(--ink); color:var(--paper); box-shadow:5px 5px 0 var(--paper); }
.contact .button:hover { background:#403059; }
.contact-stars { position:absolute; top:-40px; right:50%; color:rgba(255,246,231,.14); font-size:210px; line-height:1; pointer-events:none; }
.contact-stars>.contact-star-secondary { position:absolute; left:280px; top:50px; }
.contact-copy { position:relative; z-index:2; }
.contact-sticker { position:relative; flex-shrink:0; width:194px; height:194px; padding:0; display:grid; place-items:center; background:var(--yellow); border:3px solid var(--ink); border-radius:50%; box-shadow:7px 8px 0 var(--ink); outline:3px solid var(--paper); outline-offset:3px; transform:rotate(-6deg); animation:sticker-bob 6s ease-in-out infinite; }
.contact-sticker:hover,.contact-sticker:focus-visible { background:var(--pink); rotate:3deg; box-shadow:9px 10px 0 var(--ink); }
.contact-sticker:focus-visible { outline:3px solid var(--ink); outline-offset:8px; }
.elastic-sticker { transition:background .2s,rotate .2s,box-shadow .2s; }
.elastic-sticker:active { animation:none; scale:.92 1.08; }
.elastic-sticker.is-bouncing { animation:sticker-elastic .85s ease-out both; }
.contact-sticker::before { content:""; position:absolute; inset:9px; border:1.5px dashed var(--ink); border-radius:50%; opacity:.6; }
.sticker-inner { position:relative; display:grid; grid-template-rows:minmax(0,1fr) 59px minmax(0,1fr); place-items:center; gap:7px; width:100%; height:100%; padding:23px; text-align:center; }
.sticker-kicker { font:800 12px/1.2 var(--body); letter-spacing:.12em; }
.sticker-symbol { width:59px; height:59px; overflow:visible; fill:var(--pink); stroke:var(--ink); stroke-width:1.5; }
.contact-sticker:is(:hover,:focus-visible) .sticker-symbol { fill:var(--yellow); }
.sticker-message { font:900 15px/1.12 var(--display); letter-spacing:.025em; }
.sticker-spark { position:absolute; top:-12px; right:-8px; color:var(--paper); font-size:39px; line-height:1; }
.star-glyph { display:inline-block; line-height:inherit; transform-origin:50% 50%; animation:star-twinkle var(--star-duration,4.8s) ease-in-out var(--star-delay,0s) infinite,star-sway 8s ease-in-out var(--star-delay,0s) infinite; }
.star-vector { transform-box:fill-box; transform-origin:center; animation:star-twinkle var(--star-duration,5s) ease-in-out var(--star-delay,0s) infinite,spin 24s linear var(--star-delay,0s) infinite; }

footer { width:min(var(--max),calc(100% - 80px)); margin:auto; padding:80px 0 25px; }
.footer-top { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.footer-brand { display:inline-flex; gap:16px; align-items:center; font:900 clamp(38px,5vw,68px)/1 var(--display); letter-spacing:.075em; }
.footer-brand>span { color:var(--pink); font-size:.5em; }
.footer-top p { font-size:12px; color:var(--muted); margin:16px 0 0; }
.footer-note { font-size:12px; letter-spacing:.12em; color:var(--muted); line-height:1.8; text-align:right; }
.footer-note em { color:var(--lavender); font-size:23px; letter-spacing:0; }
.social-links { display:grid; grid-template-columns:repeat(4,1fr); margin-top:38px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.social-links .social-link { position:relative; min-width:0; display:block; padding:23px 40px 23px 0; border:0; color:inherit; background:transparent; text-align:left; transition:color .2s,background .2s; }
.social-links .social-link+.social-link { padding-left:25px; border-left:1px solid var(--line); }
.social-link>span { font-size:12px; letter-spacing:.1em; display:block; color:var(--lavender); }
.social-link strong { display:block; font-size:14px; font-weight:500; margin-top:7px; user-select:text; }
.social-link small { display:block; margin-top:6px; font-size:12px; letter-spacing:.08em; color:var(--muted); }
.social-link>i { position:absolute; right:18px; top:29px; font-size:25px; color:var(--pink); transition:translate .2s; }
.social-links .social-link:hover { color:var(--pink); background:rgba(185,165,243,.04); }
.social-link:hover>i { translate:4px -4px; }
.footer-bottom { display:flex; justify-content:space-between; padding-top:24px; font-size:12px; letter-spacing:.1em; color:var(--muted); }
.footer-bottom i { color:var(--pink); margin-left:4px; }

.project-dialog { width:min(560px,calc(100% - 36px)); padding:45px; border:2px solid var(--ink); border-radius:13px; color:var(--ink); background:var(--paper); box-shadow:10px 10px 0 var(--lavender); }
.project-dialog::backdrop { background:rgba(13,12,26,.83); }
.project-dialog[open] { animation:dialog-in .25s ease-out; }
.dialog-close { position:absolute; top:12px; right:13px; width:35px; height:35px; border:1px solid #d6cdcf; border-radius:50%; color:var(--ink); background:transparent; font-size:25px; line-height:1; }
.project-dialog .outline-pill { border-color:#c9bdce; color:#75518d; }
.project-dialog h2 { font-size:32px; line-height:1.1; letter-spacing:-.035em; margin:25px 0 18px; }
.project-dialog>p { font-size:14px; color:#635d6d; }
.dialog-note { display:flex; gap:17px; align-items:flex-start; padding:18px; background:#eee4f2; border-radius:8px; margin:25px 0; }
.dialog-note>span { color:#7d5ba6; font-size:27px; line-height:1.2; }
.dialog-note>p { margin:0; font-size:12px; color:#635d6d; }
.project-dialog .button { box-shadow:4px 4px 0 var(--ink); font-size:12px; }
.project-dialog { max-height:calc(100dvh - 40px); overflow:auto; }
.project-dialog [hidden] { display:none; }
.project-dialog.is-video { padding:32px; width:min(600px,calc(100% - 36px)); }
.project-dialog.is-video h2 { font:800 25px/1.2 var(--body); letter-spacing:0; margin:20px 0 10px; }
.project-dialog.is-video .dialog-description { font-size:12px; margin-bottom:0; }
.dialog-media { width:min(240px,27dvh,100%); aspect-ratio:9/16; margin:20px auto; border:2px solid var(--ink); border-radius:10px; overflow:hidden; background:var(--deep); }
.dialog-media iframe,.dialog-media video { display:block; width:100%; height:100%; border:0; object-fit:contain; }
.project-dialog.is-landscape { width:min(900px,calc(100% - 36px)); }
.is-landscape .dialog-media { width:100%; aspect-ratio:16/9; }
.dialog-youtube { width:100%; justify-content:center; }
.project-dialog .platform-source-button { display:grid; grid-template-columns:34px minmax(0,1fr) 20px; align-items:center; gap:10px; min-height:58px; padding:10px; border:2px solid var(--ink); border-radius:9px; color:var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--lavender); font:700 13px/1.3 var(--body); text-decoration:none; }
.platform-source-button .platform-mark { width:34px; height:34px; border:0; box-shadow:none; background:transparent; }
.platform-source-button .platform-mark svg { width:30px; height:30px; }
.platform-source-button>span:not(.platform-mark):not(.ui-icon-holder) { font:700 13px/1.3 var(--body); }
.platform-source-button .ui-icon-holder { font-size:18px; }
@media(max-width:680px) {
  .shorts-browser-bar { max-width:360px; align-items:flex-start; flex-direction:column; gap:16px; }
  .video-library-heading>p { font-size:21px; }
  .video-filters { gap:7px; }
  .video-filters button { padding:9px 10px; font-size:12px; gap:6px; }
  .shorts-gallery,.shorts-gallery[data-filter="instagram"] { grid-template-columns:1fr; gap:24px; max-width:360px; }
  .short-video-copy { padding:14px 12px; }
  .short-video-copy h4 { font-size:18px; margin:9px 0 0; }
  .short-video-kicker { font-size:12px; }
  .short-video-number { width:25px; height:25px; top:9px; right:9px; font-size:12px; }
  .short-video-preview::after { width:64px; height:64px; border-width:2px; background-size:21px 21px; box-shadow:3px 4px 0 var(--video-accent); }
  .short-video-action { font-size:12px; gap:6px; }
  .motion-gallery-heading { align-items:flex-start; flex-direction:column; gap:7px; }
  .motion-gallery { grid-template-columns:1fr; max-width:360px; }
  .project-dialog.is-video { padding:38px 22px 26px; }
  .project-dialog.is-video h2 { font-size:22px; }
}
@media(max-width:360px) { .shorts-gallery,.motion-gallery { grid-template-columns:1fr; } .short-video-card { width:100%; justify-self:center; } .short-video-copy h4 { font-size:17px; } }
html { scrollbar-gutter:stable; }
body.watching-video { overflow:hidden; }
.project-dialog.is-short-player[open] { --portrait-height:min(82dvh,calc(100dvh - 80px),760px); --player-aspect:.5625; display:grid; grid-template-columns:minmax(0,calc(var(--portrait-height) * var(--player-aspect))) minmax(0,1fr); grid-template-rows:auto auto auto 1fr auto auto; column-gap:28px; width:min(860px,calc(100% - 32px)); padding:20px; max-height:calc(100dvh - 32px); overflow:auto; }
.project-dialog.is-short-player.is-instagram { --player-aspect:.7; }
.is-short-player .dialog-media { grid-column:1; grid-row:1/7; align-self:start; width:100%; aspect-ratio:9/16; margin:0; border:0; outline:2px solid var(--ink); border-radius:12px; }
.is-short-player.is-instagram .dialog-media { aspect-ratio:7/10; }
.is-short-player .outline-pill { grid-column:2; grid-row:1; justify-self:start; align-self:start; margin-top:40px; }
.project-dialog.is-short-player h2 { grid-column:2; grid-row:2; margin:18px 0 14px; font-size:27px; line-height:1.2; }
.project-dialog.is-short-player .dialog-description { grid-column:2; grid-row:3; font-size:13px; line-height:1.6; }
.is-short-player .dialog-youtube { grid-column:2; grid-row:5; margin:20px 0; }
.dialog-watch-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.is-short-player .dialog-watch-nav { grid-column:2; grid-row:6; }
.dialog-watch-nav button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:39px; padding:8px 12px; border:2px solid var(--ink); border-radius:8px; background:var(--lavender); color:var(--ink); box-shadow:2px 2px 0 var(--ink); font-size:12px; font-weight:750; transition:translate .2s,background .2s; }
.dialog-watch-nav button:hover { translate:0 -2px; background:var(--pink); }
.dialog-watch-count { font-size:12px; font-weight:800; white-space:nowrap; }
.ui-icon-holder { display:inline-grid; place-items:center; vertical-align:middle; line-height:1; flex-shrink:0; }
.ui-icon { display:block; width:1em; height:1em; max-width:none; flex-shrink:0; }
.project-play,.dialog-close,.short-video-action i,.service-foot i,.social-link i,.paper-caption i { display:grid; place-items:center; line-height:1; }
.dialog-close { padding:0; }
.button>.ui-icon-holder,.header-cta>.ui-icon-holder,.text-link>.ui-icon-holder,.dialog-watch-nav button>.ui-icon-holder { display:inline-grid; place-items:center; line-height:1; }
.star-glyph { display:inline-grid; place-items:center; vertical-align:middle; line-height:1; }
@media(max-width:720px) {
  .project-dialog.is-short-player[open] { --portrait-height:calc(100dvh - 224px); grid-template-columns:1fr; grid-template-rows:auto auto auto auto; gap:11px; width:calc(100% - 20px); padding:14px; max-height:calc(100dvh - 20px); }
  .project-dialog.is-short-player .outline-pill,.project-dialog.is-short-player .dialog-description { display:none; }
  .project-dialog.is-short-player h2 { grid-column:1; grid-row:1; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:0; padding-right:29px; font-size:17px; line-height:1.3; }
  .is-short-player .dialog-media { grid-column:1; grid-row:2; justify-self:center; width:min(calc(var(--portrait-height) * var(--player-aspect)),100%); }
  .is-short-player .dialog-watch-nav { grid-column:1; grid-row:3; }
  .project-dialog.is-short-player .dialog-youtube { grid-column:1; grid-row:4; width:100%; margin:0; }
  .is-short-player .dialog-close { top:9px; right:9px; width:29px; height:29px; font-size:21px; }
  .dialog-watch-nav button { min-height:36px; padding:7px 10px; }
}
@media(max-height:540px) and (min-width:721px) { .is-short-player .outline-pill { margin-top:12px; } .project-dialog.is-short-player h2 { font-size:18px; margin:10px 0 8px; } .project-dialog.is-short-player .dialog-description { font-size:12px; line-height:1.45; } .is-short-player .dialog-youtube { margin:8px 0; } .dialog-watch-nav button { min-height:36px; } }
.placeholder-toast { position:fixed; z-index:150; left:50%; bottom:28px; max-width:calc(100% - 40px); width:max-content; padding:13px 20px; border:2px solid var(--ink); border-radius:8px; color:var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--lavender); font-size:12px; opacity:0; pointer-events:none; translate:-50% 20px; transition:opacity .2s,translate .2s; }
.placeholder-toast.show { opacity:1; translate:-50% 0; }
.motion-toggle { position:fixed; z-index:80; left:20px; bottom:18px; border:1px solid rgba(255,246,231,.4); border-radius:30px; padding:8px 12px; background:var(--night); color:var(--paper); font-size:12px; font-weight:700; letter-spacing:.08em; box-shadow:3px 3px 0 rgba(185,165,243,.4); }
.motion-toggle>span { color:var(--pink); margin-right:5px; }
.cursor-glow { position:fixed; z-index:120; color:var(--pink); font-size:19px; opacity:0; pointer-events:none; translate:15px 13px; }
body.pointer-active .cursor-glow { opacity:.6; }
.cursor-spark { position:fixed; z-index:110; width:3px; height:3px; border-radius:50%; background:var(--spark-color); pointer-events:none; animation:cursor-spark .7s ease-out forwards; }
.particle-field { position:fixed; z-index:1; inset:0; overflow:hidden; pointer-events:none; }
.particle { position:absolute; top:-20px; left:var(--x); width:var(--size); height:var(--size); background:var(--particle-color); opacity:.2; animation:particle-fall var(--duration) linear var(--delay) infinite; }
.particle.is-dot { border-radius:50%; }
.particle.is-star { clip-path:polygon(50% 0,60% 39%,100% 50%,60% 61%,50% 100%,40% 61%,0 50%,40% 39%); }
.particle.is-diamond { clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
main,footer { position:relative; z-index:2; }
main { overflow:clip; }
.reveal { opacity:1; }
html.motion-ready .reveal { opacity:0; translate:0 20px; transition:opacity .6s ease,translate .6s cubic-bezier(.2,.75,.25,1); }
html.motion-ready .reveal.visible { opacity:1; translate:0 0; }
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after { animation-play-state:paused!important; }
html.motion-paused { scroll-behavior:auto; }
@keyframes marquee { to { transform:translateX(-50%); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes star-float { 0%,100% { translate:0 0; } 50% { translate:0 -9px; } }
@keyframes star-twinkle { 0%,100% { opacity:.7; scale:.9; } 45%,60% { opacity:1; scale:1.08; } }
@keyframes star-sway { 0%,100% { rotate:-10deg; } 50% { rotate:12deg; } }
@keyframes sticker-bob { 0%,100% { translate:0 2px; } 50% { translate:0 -5px; } }
@keyframes tag-float { 0%,100% { translate:0 0; } 50% { translate:0 -7px; } }
@keyframes arrow-nudge { 50% { translate:0 3px; } }
@keyframes status-pulse { 50% { box-shadow:0 0 0 6px rgba(184,228,219,.02); } }
@keyframes grid-drift { to { background-position:44px 44px; } }
@keyframes comic-spikes-pulse { 0%,100% { scale:.9; } 50% { scale:1.05; } }
@keyframes comic-halftone-pulse { 0%,100% { opacity:.4; scale:1; } 50% { opacity:.5; scale:1.025; } }
@keyframes experience-idle { 0%,35%,100% { scale:1; } 47% { scale:1.035 .975; } 59% { scale:.985 1.025; } 72% { scale:1; } }
@keyframes sticker-elastic {
  0% { scale:.92 1.08; }
  25% { scale:1.15 .86; }
  48% { scale:.95 1.08; }
  72% { scale:1.05 .97; }
  100% { scale:1; }
}
@keyframes playhead { to { left:80%; } }
@keyframes moon-bob { 50% { translate:0 -8px; } }
@keyframes particle-fall { to { transform:translate(var(--drift),calc(100vh + 40px)) rotate(120deg); } }
@keyframes cursor-spark { to { opacity:0; transform:translate(var(--spark-x),var(--spark-y)) scale(0); } }
@keyframes dialog-in { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }

@media(min-width:1600px) { .hero-layout { min-height:750px; } .hero-art { height:650px; } }
@media(max-width:1150px) {
  .site-header,.hero,.section,footer { width:calc(100% - 64px); }
  .site-header { gap:20px; }
  .desktop-nav { gap:22px; }
  .brand-name { font-size:17px; }
  .brand-name small { font-size:12px; }
  .header-cta { padding:9px 13px; }
  .hero-layout { gap:35px; min-height:610px; }
  .hero h1 { font-size:clamp(49px,5.6vw,65px); }
  .hero-art { height:525px; }
  .hero-actions { gap:17px; }
  .hero-note { margin-left:110px; }
  .hero-actions .button { padding:14px 17px; gap:16px; }
  .text-link { font-size:12px; }
  .about { width:100%; padding-inline:40px; }
  .about-layout { gap:65px; }
  .about-photo { height:350px; }
  .service-card { padding:23px; }
  .service-card h3 { font-size:19px; }
  .contact { width:calc(100% - 36px); padding:65px 45px; }
  .contact-sticker { width:178px; height:178px; }
  .sticker-inner { padding:20px; gap:5px; }
}
@media(max-width:900px) {
  .site-header { height:85px; }
  .desktop-nav { display:none; }
  .header-cta { margin-left:auto; }
  .menu-toggle { display:block; }
  .desktop-nav.open { position:absolute; top:calc(100% - 1px); right:0; left:0; display:grid; gap:0; margin:0; padding:14px; border:1px solid var(--line); border-radius:0 0 8px 8px; background:var(--panel); box-shadow:0 15px 30px rgba(0,0,0,.2); }
  .desktop-nav.open a { padding:13px 17px; }
  .desktop-nav.open a span { position:static; margin-left:15px; }
  .desktop-nav.open a::after { display:none; }
  .hero-layout { gap:30px; grid-template-columns:1.03fr 1fr; }
  .hero h1 { font-size:48px; }
  .hero-art { height:465px; }
  .hero-copy>p { font-size:13px; }
  .eyebrow { font-size:12px; letter-spacing:.08em; }
  .hero-actions { flex-direction:column; align-items:flex-start; gap:13px; }
  .hero-note { margin:20px 0; }
  .hero-chips { gap:9px; font-size:12px; }
  .tag-a { font-size:17px; padding:10px 12px; left:-15px; }
  .tag-a strong { font-size:22px; }
  .tag-b { font-size:12px; right:-14px; padding:10px; }
  .art-seal { width:124px; left:-15px; }
  .seal-center { gap:6px; padding:13px 7px 12px; }
  .seal-symbol { width:34px; height:34px; }
  .seal-symbol svg { width:26px; height:26px; }
  .seal-label { font-size:12px; }
  .seal-name { font-size:12px; }
  .section { padding-block:85px; }
  .section-heading { gap:25px; }
  .section h2 { font-size:44px; }
  .project-visual { height:330px; }
  .project-wide .project-visual { height:360px; }
  .project-meta { align-items:flex-start; flex-direction:column; gap:8px; }
  .visual-word { font-size:44px; }
  .motion-flower span { font-size:210px; }
  .about-layout { gap:50px; }
  .about-photo { height:330px; }
  .experience-sticker { width:110px; height:110px; right:-22px; }
  .experience-sticker strong { font-size:39px; }
  .experience-sticker span { font-size:12px; }
  .about-copy>p { font-size:12px; }
  .about-copy>p.lead { font-size:15px; }
  .about-signature { gap:15px; }
  .about-signature>span { font-size:25px; }
  .about-signature small { font-size:12px; }
  .service-list { gap:15px; }
  .service-card { padding:20px; min-height:340px; }
  .service-card h3 { font-size:17px; }
  .service-card p { font-size:12px; }
  .service-top svg { width:50px; height:50px; }
  .service-foot { font-size:12px; }
  .process { padding-top:10px; }
  .process-steps li { padding-right:18px; }
  .process-steps li+li { padding-left:18px; }
  .process-steps h3 { font-size:13px; }
  .process-steps p { font-size:12px; }
  .process-steps>li>i { right:12px; }
  .contact { padding:60px 35px; }
  .contact h2 { font-size:55px; }
  .contact-sticker { width:164px; height:164px; }
  .sticker-inner { grid-template-rows:minmax(0,1fr) 49px minmax(0,1fr); padding:18px; }
  .sticker-symbol { width:49px; height:49px; }
  .sticker-kicker { font-size:12px; }
  .sticker-message { font-size:13px; }
  .social-links { grid-template-columns:repeat(2,1fr); }
  .social-links .social-link:nth-child(odd) { padding-left:0; border-left:0; }
  .social-links .social-link:nth-child(n+3) { border-top:1px solid var(--line); }
  .social-link strong { font-size:12px; }
}
@media(max-width:680px) {
  html { scroll-padding-top:20px; }
  .site-header,.hero,.section,footer { width:calc(100% - 40px); }
  .site-header { height:78px; gap:15px; }
  .brand-emblem { width:42px; height:42px; border-radius:11px; }
  .brand-mark { width:31px; height:31px; }
  .brand { gap:12px; }
  .brand-name { font-size:16px; }
  .brand-name small { font-size:12px; }
  .header-cta { display:none; }
  .menu-toggle { margin-left:auto; }
  .hero-topline { padding:19px 0 30px; font-size:12px; }
  .hero-topline>span:last-child { display:none; }
  .hero-layout { display:flex; flex-direction:column; align-items:stretch; padding:4px 0 20px; gap:35px; }
  .hero-copy { padding-top:5px; }
  .eyebrow { font-size:12px; margin-bottom:22px; letter-spacing:.08em; }
  .hero h1 { font-size:clamp(46px,12.5vw,70px); letter-spacing:-.05em; margin-bottom:31px; }
  .hero-copy>p { font-size:14px; margin-bottom:24px; max-width:390px; }
  .hero-actions { flex-direction:row; gap:19px; flex-wrap:wrap; align-items:center; }
  .hero-actions .button { font-size:12px; padding:15px 17px; }
  .text-link { font-size:12px; }
  .hero-note { margin:23px 0 23px 65px; }
  .hero-note svg { width:45px; height:38px; }
  .hero-note span { font-size:16px; }
  .hero-chips { font-size:12px; gap:12px; }
  .hero-art { width:calc(100% - 20px); height:480px; margin:20px auto 5px; }
  .art-frame { border-radius:155px 155px 10px 10px; }
  .tag-a { left:-15px; top:9%; font-size:22px; }
  .tag-a strong { font-size:26px; }
  .tag-b { right:-17px; bottom:15%; font-size:12px; }
  .art-seal { width:130px; left:-13px; bottom:-1%; }
  .hero-bottom { padding:28px 0; font-size:12px; }
  .hero-bottom>span { display:none; }
  .hero-orbit { width:400px; height:400px; right:-50px; top:600px; }
  .marquee { padding:16px 0; }
  .marquee-track { gap:25px; }
  .marquee span { font-size:12px; }
  .marquee i { font-size:20px; }
  .section { padding-block:65px; }
  .section h2 { font-size:clamp(36px,9vw,47px); }
  .section-label { font-size:12px; margin-bottom:19px; }
  .section-heading { display:block; margin-bottom:30px; }
  .section-heading>p,.heading-aside { margin-top:23px; font-size:12px; }
  .heading-aside .outline-pill { margin-top:13px; }
  .heading-star { margin-left:10px; }
  .project-grid { grid-template-columns:1fr; gap:32px; }
  .project-wide { grid-column:auto; }
  .project-visual,.project-wide .project-visual { height:330px; }
  .visual-comic { width:78%; height:76%; left:10%; top:10%; }
  .visual-comic>span { font-size:103px; }
  .mini-timeline { display:none; }
  .visual-caption { font-size:12px; bottom:28px; left:17px; }
  .project-play { width:43px; height:43px; right:16px; bottom:18px; }
  .project-category { font-size:12px; left:17px; top:17px; }
  .visual-word { font-size:54px; }
  .project-meta h3 { font-size:16px; }
  .projects-footnote { font-size:12px; max-width:285px; margin:27px auto 0; }
  .about { width:100%; padding:70px 25px; }
  .about-layout { display:flex; flex-direction:column; gap:70px; align-items:stretch; }
  .about-art { width:calc(100% - 30px); max-width:400px; margin:0 auto; }
  .about-photo { height:350px; }
  .about-doodle { top:-25px; right:-22px; font-size:54px; }
  .experience-sticker { width:118px; height:118px; right:-22px; bottom:-28px; }
  .experience-sticker strong { font-size:43px; }
  .experience-sticker span { font-size:12px; }
  .about-copy>p { font-size:14px; }
  .about-copy>p.lead { font-size:17px; }
  .about h2 { font-size:48px; }
  .about-signature { flex-wrap:wrap; gap:12px 16px; }
  .about-signature>span { font-size:24px; }
  .about-signature small { flex-basis:100%; }
  .about-signature small { font-size:12px; }
  .service-list { grid-template-columns:1fr; gap:22px; }
  .service-card { min-height:310px; padding:26px; }
  .service-card h3 { font-size:25px; }
  .service-card p { font-size:13px; }
  .service-top { margin-bottom:24px; }
  .service-top svg { width:60px; height:60px; }
  .service-foot { font-size:12px; }
  .process { padding-top:8px; }
  .process-steps { grid-template-columns:1fr 1fr; }
  .process-steps li,.process-steps li+li { padding:21px 17px 25px; min-height:205px; }
  .process-steps li:nth-child(2) { border-right:0; }
  .process-steps li:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .process-steps h3 { font-size:13px; }
  .process-steps p { font-size:12px; }
  .process-steps>li>span { font-size:29px; margin-bottom:25px; }
  .process-steps>li>i { top:17px; right:17px; font-size:20px; }
  .contact { width:calc(100% - 24px); padding:50px 25px; flex-direction:column; align-items:flex-start; gap:34px; }
  .contact h2 { font-size:clamp(36px,9.4vw,54px); }
  .contact h2>span { margin-left:8px; }
  .contact p { font-size:12px; }
  .contact-sticker { display:grid; align-self:center; width:164px; height:164px; }
  .contact-stars { top:0; right:-180px; font-size:240px; }
  .contact-stars>.contact-star-secondary { display:none; }
  footer { padding-top:58px; }
  .footer-top { align-items:flex-start; gap:20px; }
  .footer-brand { font-size:35px; gap:8px; letter-spacing:.055em; }
  .footer-top p { font-size:12px; max-width:260px; }
  .footer-note { display:none; }
  .social-links { grid-template-columns:1fr; margin-top:28px; }
  .social-links .social-link,.social-links .social-link+.social-link { padding:21px 45px 21px 0; border-left:0; }
  .social-links .social-link+.social-link { border-top:1px solid var(--line); }
  .social-link strong { font-size:14px; }
  .social-link>i { right:5px; }
  .footer-bottom { gap:16px; flex-wrap:wrap; font-size:12px; padding-bottom:30px; }
  .footer-bottom>span:nth-child(2) { display:none; }
  .motion-toggle { left:12px; bottom:12px; font-size:12px; }
  .project-dialog { padding:38px 25px 28px; }
  .project-dialog h2 { font-size:28px; }
  .project-dialog .button { width:100%; padding:14px 13px; gap:12px; font-size:12px; }
  .cursor-glow { display:none; }
}
@media(max-width:360px) {
  .hero h1 { font-size:43px; }
  .hero-actions { flex-direction:column; align-items:flex-start; gap:13px; }
  .hero-art { height:420px; }
  .mai-chibi { bottom:128px; }
  .hero-chips { font-size:12px; gap:9px; }
  .about-photo { height:290px; }
  .footer-brand { font-size:31px; }
  .process-steps { grid-template-columns:1fr; }
  .process-steps li { border-right:0; border-bottom:1px solid var(--line); min-height:175px; }
}
@media(hover:none),(pointer:coarse) { .cursor-glow,.cursor-spark { display:none; } }
@media(prefers-reduced-motion:reduce) {
  html:not(.motion-rich) { scroll-behavior:auto; }
  html:not(.motion-rich) *,html:not(.motion-rich) *::before,html:not(.motion-rich) *::after { animation:none!important; transition:none!important; }
  html:not(.motion-rich) .reveal { opacity:1; translate:none; }
}