:root{
  color-scheme:dark;--paper:#111a3b;--ink:#8ea0ff;--deep:#eef1ff;--mist:#222d62;--text:#d9defa;--hi:#ffe14d;--on-hi:#111a3b;
  --rail:0px;--head:78px;
  --f-head:"Bricolage Grotesque","Noto Sans JP","Noto Sans KR","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Instrument Sans","Noto Sans JP","Noto Sans KR",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-hand:"Caveat","Noto Sans JP","Noto Sans KR","Segoe Print","Bradley Hand",cursive;
  --zh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 10 10 0 20 10' fill='none' stroke='%238ea0ff' stroke-width='1.4'/%3E%3C/svg%3E");
  --zv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath d='M10 0 0 10 10 20' fill='none' stroke='%238ea0ff' stroke-width='1.4'/%3E%3C/svg%3E");
  --p:0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:1.0625rem/1.65 var(--f-body);color:var(--text);
  background:var(--paper)}
h1,h2,h3{font-family:var(--f-head);line-height:1.1;margin:0 0 .6em;color:var(--deep)}
h1{font-size:clamp(2.1rem,4.4vw,3.6rem)}h2{font-size:clamp(1.8rem,3vw,2.5rem)}h3{font-size:1.25rem}
p{margin:0 0 1em;max-width:62ch}
a{color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--hi);color:var(--on-hi);padding:.5rem 1rem;z-index:100}.skip:focus{left:0}

/* buttons */
.btn{font:600 1rem var(--f-body);background:var(--ink);color:var(--on-hi);border:2px solid var(--ink);padding:.55rem 1.2rem;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-block;transition:background .2s,color .2s}
.btn:hover{background:var(--deep)}
.btn--line{background:transparent;color:var(--ink)}.btn--line:hover{background:var(--ink);color:var(--on-hi)}
.link{background:none;border:0;color:var(--ink);text-decoration:underline;cursor:pointer;font:inherit;padding:0;margin-top:.5rem}

/* header with zigzag border */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;background:var(--paper)}
.site-header::before,.site-header::after{content:"";display:block;height:10px;background:var(--zh) repeat-x 0 0/20px 10px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 1.5rem;position:relative}
.nav{display:flex;gap:2rem;list-style:none;margin:0;padding:0}
.nav a{font-family:var(--f-head);font-weight:500;color:var(--text);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;padding:.1rem .2rem}
.nav a:hover,.nav a.active{background:var(--hi);color:var(--on-hi);text-decoration-color:var(--ink)}
.bar__end{display:flex;align-items:center;gap:1rem}
.logo{font:700 1.15rem var(--f-head);color:var(--ink);text-decoration:none;border:2px solid var(--ink);padding:.15rem .7rem;letter-spacing:.08em}
.lang{display:flex;border:2px solid var(--ink)}
.lang button{font:700 .95rem var(--f-head);letter-spacing:.06em;background:none;border:0;color:var(--ink);padding:.2rem .65rem;cursor:pointer}
.lang button+button{border-left:2px solid var(--ink)}
.lang button[aria-pressed=true]{background:var(--ink);color:var(--on-hi)}
html:lang(ko) body{word-break:keep-all}
html:lang(ja) h1,html:lang(ja) h2,html:lang(ko) h1,html:lang(ko) h2{line-height:1.3}
html:lang(ja) body,html:lang(ko) body{line-height:1.8}
.menu-btn{display:none;font:inherit;background:none;border:2px solid var(--ink);color:var(--ink);padding:.3rem .8rem;border-radius:6px}

main,.site-footer{position:relative;z-index:1}
main{padding:0 var(--rail)}
.sec{max-width:1100px;margin:0 auto;padding:5.5rem 1.5rem;scroll-margin-top:var(--head)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.lead{color:#9aa5e6}

/* hero + planets */
.hero{position:relative;min-height:100svh;padding-top:var(--head);scroll-margin-top:0}
.hero__copy{position:absolute;left:50%;top:calc(var(--head) + 18%);transform:translateX(-50%);width:min(520px,34vw);min-width:340px;text-align:center;z-index:2}
.hero__copy p{margin-inline:auto}
.actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.note{font:600 1.5rem var(--f-hand);color:var(--ink);margin:1rem auto 0}
.sky{position:absolute;inset:var(--head) 0 0 0}
.orb{--k:1;position:absolute;left:var(--x);top:var(--y);width:calc(var(--s)*1px*var(--k));aspect-ratio:1;margin:calc(var(--s)*-.5px*var(--k)) 0 0 calc(var(--s)*-.5px*var(--k));padding:0;border:0;background:none;color:var(--ink);font:600 clamp(1rem,1.6vw,1.5rem) var(--f-hand);cursor:default}
.orb--live{cursor:pointer}
.orb__body{position:absolute;inset:0;display:grid;place-items:center;text-align:center;border:2px solid var(--ink);border-radius:50%;background:var(--paper);overflow:hidden;
  animation:pop .8s var(--d) backwards cubic-bezier(.3,1.5,.5,1),drift var(--t) var(--d) ease-in-out infinite alternate;transition:background .25s,color .25s}
.orb__body::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,var(--ink) 0 1.2px,transparent 1.2px 5px);-webkit-mask:radial-gradient(circle at 36% 40%,transparent 62%,#000 63%);mask:radial-gradient(circle at 36% 40%,transparent 62%,#000 63%)}
.orb__body span{position:relative;z-index:1;background:var(--paper);padding:0 .4rem;line-height:1.1}
.orb--live:hover .orb__body,.orb--live:focus-visible .orb__body{background:var(--hi)}
.orb--live:hover .orb__body span,.orb--live:focus-visible .orb__body span{background:var(--hi);color:var(--on-hi)}
@keyframes pop{from{scale:0;opacity:0}}
@keyframes drift{from{translate:0 -7px}to{translate:0 9px}}

/* steps with connecting arrow line */
.steps{list-style:none;margin:0;padding:0 0 0 2.4rem;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:.7rem;top:.5rem;bottom:.5rem;border-left:2px dashed var(--ink)}
.steps li{position:relative;counter-increment:s;margin-bottom:1.6rem}
.steps li::before{content:counter(s);position:absolute;left:-2.4rem;top:0;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:grid;place-items:center;font:700 .9rem var(--f-head);color:var(--ink)}
.steps h3{margin-bottom:.2em}.steps p{margin:0}

/* services */
.rows article{display:grid;grid-template-columns:1fr 2fr 1fr;gap:2rem;padding:1.6rem 0;border-top:2px solid var(--ink);align-items:start}
.rows h3{margin:0}.rows p{margin:0}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.tags li{border:1.5px solid var(--ink);border-radius:999px;padding:0 .7rem;font-size:.9rem;color:var(--ink)}

/* gallery */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.5rem}
.filters button{font:inherit;background:none;border:2px solid var(--ink);color:var(--ink);border-radius:999px;padding:.2rem 1rem;cursor:pointer}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--on-hi)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem 1.5rem}
.work h3{margin:.7rem 0 .1rem}.work p{margin:0;font-size:.95rem}
.thumb{height:190px;border:2px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--c);display:grid;grid-template-rows:20px 1fr;transition:translate .2s,box-shadow .2s}
.work:hover .thumb{translate:-3px -3px;box-shadow:9px 9px 0 var(--c)}
.thumb b{border-bottom:2px solid var(--ink);background:linear-gradient(90deg,var(--ink) 4px,transparent 4px) 6px 50%/10px 4px repeat-x}
.thumb div{display:grid;gap:8px;padding:10px}
.thumb i{background:var(--mist);border:1.5px solid var(--ink)}
.l1 div{grid-template:2fr 1fr/1fr 1fr}.l1 i:first-child{grid-column:1/3;background:var(--c)}
.l2 div{grid-template:1fr 1fr/1fr 2fr}.l2 i:first-child{grid-row:1/3;background:var(--c)}
.l3 div{grid-template:1fr 1fr/1fr 1fr 1fr}.l3 i:nth-child(2){background:var(--c)}

/* forms + dialogs */
form label{display:block;font-weight:600;margin-bottom:1rem}
input,select,textarea{display:block;width:100%;margin-top:.3rem;font:inherit;padding:.6rem .8rem;border:2px solid var(--ink);background:#0b1230;color:var(--text);border-radius:4px}
.status{margin:1rem 0 0;font-weight:600;min-height:1.6em}.status.err{color:#ff8a9b}
.panel{border:2px solid var(--ink);background:var(--paper);color:var(--text);width:min(520px,92vw);padding:2rem;box-shadow:8px 8px 0 var(--ink)}
.panel::backdrop{background:rgba(15,26,107,.5)}
.panel ul{padding-left:1.2rem}
.close{position:absolute;right:.8rem;top:.5rem;font-size:2rem;line-height:1;background:none;border:0;color:var(--ink);cursor:pointer}
.site-footer{padding:0 var(--rail)}
.site-footer p{max-width:1100px;margin:0 auto;padding:2rem 1.5rem 3rem;border-top:0;background:var(--zh) repeat-x 0 0/20px 10px;padding-top:2.5rem}

@media (max-width:860px){
  main,.site-footer{padding-inline:0}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:1rem;padding:1.2rem 1.5rem;background:var(--paper);border-bottom:2px solid var(--ink)}
  .nav.open{display:flex}
  .split{grid-template-columns:1fr}
  .rows article{grid-template-columns:1fr;gap:.6rem}
  .hero{display:flex;flex-direction:column}
  .hero__copy{position:static;transform:none;width:auto;min-width:0;padding:2rem 1.5rem 0}
  .sky{position:relative;inset:auto;height:560px}
  .orb{--k:.62}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.orb__body{animation:none}.thumb{transition:none}}

/* sign-in / create-account / reset dialog: centred layout */
#auth{text-align:center}
#auth-form{display:flex;flex-direction:column;align-items:center}
#auth-form h2{margin-bottom:1.2rem}
#auth-form label{width:100%;text-align:center}
#auth-form input{text-align:left}
#auth-form .btn{margin-top:.4rem;min-width:11rem}
#auth-form .status{margin-top:.8rem}
#auth-form .link:not([hidden]){display:block;margin:.4rem auto 0}


/* bento layout: services + gallery */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(170px,auto);gap:1rem}
.tile,.work{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.5rem;border:2px solid var(--ink);border-radius:20px;background:rgba(142,160,255,.08);box-shadow:5px 5px 0 rgba(142,160,255,.3);transition:translate .2s,box-shadow .2s;overflow:hidden}
.tile:hover,.work:hover{translate:-2px -2px;box-shadow:8px 8px 0 rgba(142,160,255,.45)}
.tile h3,.work h3{margin:0}.tile p{margin:0}
.tile .tags{margin-top:auto}
.tile--design{grid-column:span 2;grid-row:span 2;background:linear-gradient(160deg,#2b3aa6,#1b2677);border-color:#c9d1ff}
.tile--design h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.tile--design .tags li{border-color:#c9d1ff;color:#fff}
.tile--design::after{content:"";position:absolute;right:1.3rem;bottom:4.2rem;width:48%;height:38%;border:2px solid rgba(255,255,255,.85);border-radius:10px;
  background:linear-gradient(#fff,#fff) 12px 12px/45% 8px no-repeat,linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)) 12px 30px/70% 6px no-repeat,linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)) 12px 44px/55% 6px no-repeat,linear-gradient(var(--hi),var(--hi)) calc(100% - 12px) calc(100% - 12px)/30% 22px no-repeat;opacity:.9;transform:rotate(-3deg)}
.tile--dev{grid-column:span 2}
.tile--cta{grid-column:span 1;background:var(--hi);color:var(--on-hi);border-color:var(--hi);text-decoration:none;justify-content:space-between}
.tile--cta h3{color:var(--on-hi)}
.tile--cta svg{width:70%;align-self:flex-end}
.tile--cta:focus-visible{outline-color:#fff}

.grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(170px,auto);gap:1rem}
.work{padding:1rem}
.work:nth-child(1){grid-column:span 2;grid-row:span 2}
.work:nth-child(4){grid-column:span 2}
.work .thumb{flex:1;height:auto;min-height:130px;box-shadow:none;border-radius:12px;overflow:hidden;background:var(--paper)}
.work:hover .thumb{translate:none;box-shadow:none}
.work h3{margin:.3rem 0 0;font-size:1.1rem}.work p{font-size:.92rem}

@media (max-width:860px){
  .bento,.grid{grid-template-columns:repeat(2,1fr)}
  .tile--design,.work:nth-child(1){grid-column:span 2}
  .tile--dev,.work:nth-child(4){grid-column:span 2}
  .tile--design{grid-row:span 1;min-height:260px}
}
@media (max-width:560px){
  .bento,.grid{grid-template-columns:1fr}
  .tile--design,.tile--dev,.tile--cta,.work:nth-child(n){grid-column:auto;grid-row:auto}
}

#petals{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Japanese x American pop navigation: washi-paper bar, hanko seal, sticker pills */
:root{--head:98px;--washi:#fff8ec;--sumi:#14122b;--shu:#d93a2b;--sakura:#f6a5c0;--lav:#c4c1ec;--cream-y:#f2e57a}
.site-header{background:none;box-shadow:none;padding:12px 16px}
.site-header::before,.site-header::after{display:none}
.site-header .bar{max-width:1280px;margin:0 auto;gap:1.2rem;padding:.55rem .8rem .55rem 1rem;background:var(--washi);border:3px solid var(--sumi);border-radius:22px;box-shadow:6px 6px 0 var(--shu)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--sumi)}
.hanko{display:grid;place-items:center;width:42px;height:42px;background:var(--shu);color:var(--washi);border:2px solid var(--sumi);border-radius:7px;box-shadow:2px 2px 0 var(--sumi);transform:rotate(-6deg);font:700 1.5rem "Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif}
.brand__txt{font:800 1.75rem var(--f-head);letter-spacing:-.01em}
.site-header .nav{flex:1;justify-content:center;gap:.6rem}
.site-header .nav a{color:var(--sumi);font-weight:700;font-size:1.02rem;text-decoration:none;padding:.35rem .8rem;border:2px solid transparent;border-radius:10px}
.site-header .nav a:hover,.site-header .nav a.active{background:var(--sakura);border-color:var(--sumi);color:var(--sumi)}
.pill{display:inline-flex;align-items:center;gap:.5rem;font:600 1rem var(--f-body);color:var(--sumi);border:2.5px solid var(--sumi);border-radius:14px;padding:.5rem 1rem;cursor:pointer;text-decoration:none;box-shadow:3px 3px 0 var(--sumi);transition:translate .12s,box-shadow .12s}
.pill:hover{translate:2px 2px;box-shadow:1px 1px 0 var(--sumi)}
.pill::before{content:"";width:20px;height:20px;background:center/contain no-repeat}
.pill--pink{background:var(--sakura)}.pill--pink::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23f27ca2' stroke='%2314122b' stroke-width='1.2'%3E%3Cellipse cx='12' cy='6.5' rx='3.4' ry='5' transform='rotate(0 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='3.4' ry='5' transform='rotate(72 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='3.4' ry='5' transform='rotate(144 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='3.4' ry='5' transform='rotate(216 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='3.4' ry='5' transform='rotate(288 12 12)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2' fill='%23d93a2b'/%3E%3C/svg%3E")}
.pill--yellow{background:var(--cream-y)}.pill--yellow::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 11.5 22 3l-5.5 18-4.5-7z' fill='%2314122b'/%3E%3C/svg%3E")}
.site-header .lang{border:2.5px solid var(--sumi);border-radius:14px;overflow:hidden;background:var(--lav);box-shadow:3px 3px 0 var(--sumi)}
.site-header .lang button{color:var(--sumi);padding:.45rem .7rem}
.site-header .lang button+button{border-left:2.5px solid var(--sumi)}
.site-header .lang button[aria-pressed=true]{background:var(--sumi);color:var(--washi)}
.site-header .menu-btn{background:var(--lav);color:var(--sumi);border:2.5px solid var(--sumi);border-radius:12px;font-weight:700;margin-left:auto}
.site-header :focus-visible{outline-color:var(--shu)}
@media (max-width:1040px){.site-header .pill--yellow{display:none}}
@media (max-width:860px){
  .site-header .bar{flex-wrap:wrap}
  .site-header .nav{background:var(--washi);border:3px solid var(--sumi);border-radius:18px;top:calc(100% + 10px);box-shadow:6px 6px 0 var(--shu);align-items:flex-start}
  .bar__end{width:100%;justify-content:space-between}
}

/* sign in / create account / reset: same look as the navigation bar */
#auth.panel{width:min(440px,92vw);padding:2rem 2rem 1.6rem;background:var(--washi);color:var(--sumi);border:3px solid var(--sumi);border-radius:22px;box-shadow:6px 6px 0 var(--shu)}
#auth .close{top:.9rem;right:.9rem;width:36px;height:36px;display:grid;place-items:center;padding:0;font-size:1.5rem;color:var(--sumi);background:var(--lav);border:2.5px solid var(--sumi);border-radius:10px;box-shadow:2px 2px 0 var(--sumi)}
#auth-form h2{display:flex;flex-direction:column;align-items:center;gap:.7rem;color:var(--sumi);font-size:2rem;margin-bottom:1.2rem}
#auth-form h2::before{content:"和";display:grid;place-items:center;width:50px;height:50px;background:var(--shu);color:var(--washi);border:2px solid var(--sumi);border-radius:8px;box-shadow:2px 2px 0 var(--sumi);transform:rotate(-6deg);font:700 1.7rem "Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif}
#auth-form label{color:var(--sumi)}
#auth-form input{background:#fff;color:var(--sumi);border:2.5px solid var(--sumi);border-radius:14px;box-shadow:3px 3px 0 var(--sumi);padding:.65rem .9rem}
#auth-form input:focus-visible{outline:3px solid var(--sakura);outline-offset:2px}
#auth-form .pill{margin-top:.6rem;min-width:12rem;justify-content:center}
#auth-form .pill:hover,#auth-form .pill--pink:hover{background:var(--sakura);color:var(--sumi)}
#auth-form .link{color:var(--sumi);font-weight:600}
#auth-form .link:hover{color:var(--shu)}
#auth-form .status{color:var(--sumi)}#auth-form .status.err{color:#c4162a}

/* Warm washi page background to match the navigation */
:root{color-scheme:light;--paper:#fff8ec;--ink:#d93a2b;--deep:#14122b;--mist:#eee5d9;--text:#38334c;--hi:#f2e57a;--on-hi:#14122b}
body{background-color:var(--paper);background-image:radial-gradient(rgba(20,18,43,.035) .7px,transparent .7px);background-size:7px 7px}
.lead{color:#625c70}
input,select,textarea{background:#fff;color:var(--sumi);border-color:var(--sumi)}
.status.err{color:#c4162a}

/* Muted sakura backdrop and softly bouncing glassy planet bubbles */
:root{--paper:#e8ddd3}
body{background-color:var(--paper);background-image:radial-gradient(rgba(20,18,43,.055) .7px,transparent .7px);background-size:7px 7px}
.orb__body{border-color:rgba(217,58,43,.8);background:radial-gradient(circle at 30% 24%,#fffdf8 0 5%,#fff1e7 16%,#f3d6d1 39%,#dfb8bc 70%,#bd909f 100%);box-shadow:inset -8px -10px 18px rgba(87,42,66,.2),inset 5px 5px 13px rgba(255,255,255,.9),0 10px 18px rgba(74,42,55,.2);animation:pop .8s var(--d) backwards cubic-bezier(.3,1.5,.5,1),bubble-bounce var(--t) var(--d) ease-in-out infinite}
.orb__body::after{content:"";position:absolute;left:19%;top:13%;width:31%;height:15%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.08));filter:blur(1px);transform:rotate(-32deg);pointer-events:none}
.orb__body::before{opacity:.35}
.orb__body span{background:rgba(255,248,236,.76);border-radius:999px;box-shadow:0 1px 5px rgba(255,255,255,.35)}
@keyframes bubble-bounce{0%,100%{translate:0 0;scale:1}35%{translate:0 -11px;scale:1.015 1.025}55%{translate:0 -13px;scale:1.02 .985}72%{translate:0 1px;scale:.99 1.015}85%{translate:0 -4px;scale:1.005 .995}}
.orb--live:hover .orb__body,.orb--live:focus-visible .orb__body{background:radial-gradient(circle at 30% 24%,#fffdf8 0 5%,#fff3c8 16%,#f6d8b6 40%,#e3b7a4 74%,#bd909f 100%)}
@media (prefers-reduced-motion:reduce){.orb__body{animation:none}}

/* Upper side bubbles sweep across the sky in opposite looping arcs. */
.orb--orbit-left{animation:orbit-left-to-right 32s ease-in-out infinite;will-change:left,top}
.orb--orbit-right{animation:orbit-right-to-left 36s ease-in-out -18s infinite;will-change:left,top}
@keyframes orbit-left-to-right{
  0%,100%{left:12%;top:22%}
  25%{left:30%;top:5%}
  50%{left:52%;top:18%}
  75%{left:31%;top:5%}
}
@keyframes orbit-right-to-left{
  0%,100%{left:86%;top:16%}
  25%{left:68%;top:4%}
  50%{left:48%;top:23%}
  75%{left:69%;top:4%}
}
@media (prefers-reduced-motion:reduce){.orb--orbit-left,.orb--orbit-right{animation:none;will-change:auto}}

/* Every bubble follows the looping left, top, right, left path, with staggered timing. */
.orb,.orb.orb--orbit-left,.orb.orb--orbit-right{animation:all-bubbles-arc 36s var(--orbit-delay,0s) ease-in-out infinite;will-change:left,top}
@keyframes all-bubbles-arc{
  0%,100%{left:6%;top:27%}
  25%{left:29%;top:5%}
  50%{left:88%;top:22%}
  75%{left:47%;top:4%}
}
@media (prefers-reduced-motion:reduce){.orb,.orb.orb--orbit-left,.orb.orb--orbit-right{animation:none;will-change:auto}}

/* Blossom-like bubble motion: gentle drifting and bobbing around each home position. */
.orb,.orb.orb--orbit-left,.orb.orb--orbit-right{animation:bubble-sakura-drift var(--t) var(--orbit-delay,0s) ease-in-out infinite;will-change:transform}
@keyframes bubble-sakura-drift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  22%{transform:translate3d(16px,-15px,0) rotate(3deg)}
  48%{transform:translate3d(28px,1px,0) rotate(0deg)}
  73%{transform:translate3d(8px,17px,0) rotate(-3deg)}
}
@media (prefers-reduced-motion:reduce){.orb,.orb.orb--orbit-left,.orb.orb--orbit-right{animation:none;will-change:auto}}

/* Persistent dark mode, toggled from the navigation bar. */
.theme-toggle{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;background:var(--lav);color:var(--sumi);border:2.5px solid var(--sumi);border-radius:12px;box-shadow:3px 3px 0 var(--sumi);cursor:pointer;font:700 1.2rem/1 var(--f-head);transition:translate .12s,box-shadow .12s,background .2s}
.theme-toggle:hover{translate:2px 2px;box-shadow:1px 1px 0 var(--sumi)}
.theme-toggle:focus-visible{outline:3px solid var(--shu);outline-offset:3px}
:root[data-theme="dark"]{color-scheme:dark;--paper:#272230;--ink:#ff8575;--deep:#fff1e8;--mist:#453a4a;--text:#f2e6e1;--hi:#f1dc70;--on-hi:#211c29;--washi:#342d3c;--sumi:#f7e9e1;--shu:#ff8172;--sakura:#704c69;--lav:#51485f}
:root[data-theme="dark"] body{background-color:var(--paper);background-image:radial-gradient(rgba(255,255,255,.055) .7px,transparent .7px)}
:root[data-theme="dark"] .lead{color:#d1c4d0}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:#1e1925;color:var(--text);border-color:var(--ink)}
:root[data-theme="dark"] .theme-toggle{background:var(--sumi);color:var(--on-hi);border-color:var(--sumi);box-shadow:3px 3px 0 var(--shu)}
:root[data-theme="dark"] .tile,:root[data-theme="dark"] .work{background:rgba(255,255,255,.045)}
:root[data-theme="dark"] #auth.panel{background:var(--washi);color:var(--sumi);border-color:var(--sumi)}
:root[data-theme="dark"] #auth-form input{background:#241e2b;color:var(--sumi)}

/* LEONJAI crane crest and wordmark */
.site-header .brand{gap:.7rem;color:var(--sumi);flex:0 0 auto}
.brand__mark{display:block;width:52px;height:52px;object-fit:contain;filter:drop-shadow(1px 2px 0 rgba(23,37,68,.16))}
.brand__txt{font:800 1.25rem/1 var(--f-head);letter-spacing:.07em;color:var(--sumi)}
@media (max-width:560px){.brand__mark{width:42px;height:42px}.brand__txt{font-size:1rem;letter-spacing:.045em}}

/* L JAI identity: refined monogram and letter-spaced wordmark */
.site-header .brand{gap:.65rem;color:var(--sumi);flex:0 0 auto}
.brand__mark{display:block;width:50px;height:50px;object-fit:contain;filter:drop-shadow(1px 2px 0 rgba(23,37,68,.12))}
.brand__txt{font:600 1.45rem/1 "Baskerville Old Face",Baskerville,"Palatino Linotype",Georgia,serif;letter-spacing:.13em;color:var(--sumi)}
@media (max-width:560px){.brand__mark{width:42px;height:42px}.brand__txt{font-size:1.12rem;letter-spacing:.09em}}

/* Softer, eye-friendly page color and a quieter project button */
:root:not([data-theme="dark"]){--paper:#e4e3d9;--cream-y:#d7c89a}
:root:not([data-theme="dark"]) body{background-color:var(--paper);background-image:radial-gradient(rgba(35,39,42,.035) .7px,transparent .7px)}
.pill--yellow{background:var(--cream-y);color:#342b31;border-color:#342b31;box-shadow:3px 3px 0 #342b31}
:root[data-theme="dark"]{--cream-y:#bdae7b}
:root[data-theme="dark"] .pill--yellow{background:var(--cream-y);color:#292431;border-color:#292431;box-shadow:3px 3px 0 #292431}

#auth.panel{max-height:min(90dvh,760px);overflow-y:auto}
#auth-form label[hidden]{display:none}
#auth-form textarea{text-align:left;background:#fff;color:var(--sumi);border:2.5px solid var(--sumi);border-radius:14px;box-shadow:3px 3px 0 var(--sumi);padding:.65rem .9rem;resize:vertical}
:root[data-theme="dark"] #auth-form textarea{background:#241e2b;color:var(--sumi)}

/* Navigation groups: brand and languages left, section links centered, actions right. */
.site-header .bar{gap:1rem}
.bar__start{display:flex;align-items:center;gap:.8rem;flex:0 0 auto}
.bar__end{flex:0 0 auto;gap:.8rem}
.site-header .nav{flex:1;justify-content:center;gap:.35rem}
.site-header .nav a{white-space:nowrap;padding:.35rem .65rem}
@media (max-width:1040px){.site-header .nav{gap:.15rem}.site-header .nav a{padding:.3rem .45rem;font-size:.95rem}}
@media (max-width:860px){.site-header .bar__start{margin-right:auto}.site-header .bar__end{flex:1 0 100%;width:100%;justify-content:space-between}.site-header .nav{flex:initial}}

/* Quote-based service packages with provider connection hooks. */
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem;align-items:stretch}
.price-card{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;border:2px solid var(--sumi);border-radius:20px;background:rgba(255,248,236,.65);box-shadow:5px 5px 0 rgba(23,37,68,.14)}
.price-card--featured{background:var(--washi);border-color:var(--shu);box-shadow:5px 5px 0 rgba(217,58,43,.2)}
.price-card h3{margin:0;color:var(--sumi)}
.price-card__price{margin:0;font:700 1.35rem var(--f-head);color:var(--shu)}
.price-card ul{margin:0;padding-left:1.2rem;color:var(--text)}
.price-card li{margin:.35rem 0}
.price-card__payments{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto}
.price-card__payments button{flex:1 1 120px;padding:.55rem .7rem;border:2px solid var(--sumi);border-radius:12px;background:var(--lav);color:var(--sumi);font:700 .95rem var(--f-head);box-shadow:2px 2px 0 var(--sumi);cursor:pointer}
.price-card__payments button:hover{translate:1px 1px;box-shadow:1px 1px 0 var(--sumi)}
.price-card__status{min-height:1.4em;margin:0;font-size:.9rem}
.pricing-note{margin:1.2rem auto 0;color:var(--text);font-size:.92rem;text-align:center}
@media (max-width:860px){.pricing-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pricing-grid{grid-template-columns:1fr}.price-card{padding:1.25rem}}

/* LeonjAI reference look: charcoal canvas, warm paper, orange and ink-blue. */
:root[data-theme="dark"]{color-scheme:dark;--paper:#202124;--ink:#f5a12a;--deep:#fff1df;--mist:#14547a;--text:#f4e9da;--hi:#f5a12a;--on-hi:#18334a;--washi:#292a2b;--sumi:#fff1df;--shu:#d9413a;--sakura:#f2a0a8;--lav:#3a3b3d;--cream-y:#f5a12a}
:root[data-theme="dark"] body{background-color:var(--paper);background-image:radial-gradient(rgba(255,255,255,.055) .7px,transparent .7px)}
:root[data-theme="light"]{color-scheme:light;--paper:#fff1df;--ink:#d9413a;--deep:#18334a;--mist:#dbe6eb;--text:#293a46;--hi:#f5a12a;--on-hi:#18334a;--washi:#fff7ec;--sumi:#18334a;--shu:#d9413a;--sakura:#f3c5c1;--lav:#f4e7d6;--cream-y:#f5a12a}
:root[data-theme="light"] body{background-color:#f0e5d7;background-image:radial-gradient(rgba(24,51,74,.04) .7px,transparent .7px)}
.site-header .bar{background:#242526;border:1px solid #444547;border-radius:24px;box-shadow:5px 5px 0 #f5a12a}
.site-header .brand__txt{color:#fff1df}
.site-header .lang{background:#262729;border:1.5px solid #55575a;box-shadow:none}
.site-header .lang button{color:#fff1df}
.site-header .lang button+button{border-color:#55575a}
.site-header .lang button[aria-pressed=true]{background:#f5a12a;color:#18334a}
.site-header .nav a{color:#f4eadf}
.site-header .nav a:hover,.site-header .nav a.active{background:#f5a12a;border-color:#f5a12a;color:#18334a}
.site-header .pill--pink{background:#343638;color:#fff1df;border-color:#515356;box-shadow:3px 3px 0 #d9413a}
.site-header .pill--yellow{background:#f5a12a;color:#18334a;border-color:#f5a12a;box-shadow:3px 3px 0 #d9413a}
.site-header .theme-toggle{background:#343638;color:#fff1df;border-color:#515356;box-shadow:2px 2px 0 #d9413a}
.site-header .menu-btn{background:#343638;color:#fff1df;border-color:#515356}

/* Structured studio hero replaces the floating planet field. */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr);gap:12px;min-height:0;padding:calc(var(--head) + 18px) clamp(16px,3vw,36px) 28px;align-items:stretch}
.hero__copy{position:static;left:auto;top:auto;transform:none;width:auto;min-width:0;max-width:none;padding:clamp(24px,4vw,54px);border-radius:24px;background:#fff1df;color:#18334a;text-align:left;z-index:2;display:flex;flex-direction:column;justify-content:center}
.hero__copy h1{color:#173b58;font-size:clamp(2.2rem,5vw,4.3rem);max-width:12ch}
.hero__copy p{color:#344654}
.hero__copy .note{color:#d9413a;text-align:left;margin-left:0}
.hero__copy .actions{justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:.65rem}
.hero__copy .btn{background:#14547a;border-color:#14547a;color:#fff1df;box-shadow:3px 3px 0 rgba(20,84,122,.22)}
.hero__copy .btn--line{background:transparent;color:#14547a}
.hero__visual{display:grid;grid-template-rows:1.15fr .85fr;gap:12px;min-height:440px}
.hero__visual-card{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,2.4vw,30px);border-radius:22px;overflow:hidden}
.hero__visual-card p{margin:0;max-width:14ch;font:700 clamp(1.1rem,2.1vw,1.7rem)/1.25 var(--f-head)}
.hero__visual-card small{font-size:.84rem}
.hero__visual-card--orange{background:#f5a12a;color:#18334a}
.hero__visual-card--blue{background:#14547a;color:#fff1df}
.hero__stamp{width:48px;height:48px;display:grid;place-items:center;background:#d9413a;color:#fff1df;border-radius:12px;box-shadow:2px 3px 0 rgba(24,51,74,.18);transform:rotate(-5deg);font:700 1.5rem "Noto Sans JP",sans-serif}
.hero__count{font:800 1.8rem var(--f-head)}
.sky{display:none}

/* Graphic cards and section labels follow the reference's editorial blocks. */
.sec{max-width:1280px}
.sec>h2{padding:1rem 1.25rem;border-radius:16px;background:#f5a12a;color:#18334a;font-size:clamp(1.5rem,2.3vw,2rem);margin-bottom:1rem}
.sec>.lead{color:#e8ded2}
.bento{gap:12px}
.tile{border:1px solid #47484a;border-radius:18px;background:#fff1df;color:#18334a;box-shadow:none}
.tile h3,.tile p{color:#18334a}
.tile .tags li{border-color:#617786;color:#21465d}
.tile--design{background:#14547a;border-color:#14547a}
.tile--design h3,.tile--design p{color:#fff1df}
.tile--design .tags li{border-color:#fff1df;color:#fff1df}
.tile--dev{background:#fff1df}
.tile--care{background:#ded8ca}
.tile--cta{background:#f5a12a;border-color:#f5a12a;color:#18334a}
.tile--cta h3{color:#18334a}
.grid{gap:14px}
.work{border:1px solid #48494b;border-radius:18px;background:#fff1df;color:#18334a;box-shadow:none}
.work h3,.work p{color:#18334a}
.work .thumb{border:0;background:#14547a}
.work:nth-child(2n){background:#14547a;color:#fff1df}
.work:nth-child(2n) h3,.work:nth-child(2n) p{color:#fff1df}
.price-card{border:1px solid #48494b;background:#fff1df;color:#18334a;box-shadow:none}
.price-card h3,.price-card ul{color:#18334a}
.price-card--featured{background:#f5a12a;border-color:#f5a12a;box-shadow:none}
.price-card--featured h3,.price-card--featured ul{color:#18334a}
.price-card__price{color:#14547a}
.price-card__payments button{background:#14547a;color:#fff1df;border-color:#14547a;box-shadow:none}
.price-card--featured .price-card__payments button{background:#292a2b;color:#fff1df;border-color:#292a2b}
.pricing-note{color:#e8ded2}
#contact.sec{padding:2.5rem;margin-top:1rem;margin-bottom:2rem;background:#fff1df;border-radius:24px;color:#18334a}
#contact h2,#contact p{color:#18334a}
#contact .lead{color:#344654}
#contact .btn{background:#14547a;border-color:#14547a;color:#fff1df}
#contact .contact-actions{display:flex;flex-wrap:wrap;gap:.75rem}
#contact .contact-actions .btn--line{background:transparent;color:#14547a}
#contact .contact-actions .btn--line:hover{background:#14547a;color:#fff1df}
.site-footer p{color:#d9d1c8}

@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1.2fr) minmax(130px,.8fr);padding:calc(var(--head) + 12px) 14px 22px;gap:9px}
  .hero__copy{padding:1.25rem .95rem;border-radius:18px}
  .hero__copy h1{font-size:clamp(1.9rem,6vw,2.6rem)}
  .hero__copy p{font-size:.95rem;line-height:1.5}
  .hero__visual{min-height:420px;gap:9px}
  .hero__visual-card{padding:14px;border-radius:17px}
  .hero__visual-card p{font-size:1.05rem}
  .hero__visual-card small{font-size:.72rem}
  .hero__stamp{width:40px;height:40px}
  .hero__copy .btn{font-size:.88rem;padding:.5rem .8rem}
}
@media (max-width:560px){
  .hero{grid-template-columns:minmax(0,1.25fr) minmax(116px,.8fr)}
  .hero__copy{padding:1.05rem .8rem}
  .hero__copy h1{font-size:clamp(1.75rem,6.5vw,2.2rem)}
  .hero__visual{min-height:385px}
  .hero__visual-card small{font-size:.66rem}
  .hero__copy .note{font-size:1.1rem}
  .site-header .bar{padding:.45rem .55rem}
  .bar__start{gap:.4rem}
  .bar__start .brand{gap:.4rem}
  .bar__start .lang button{padding:.35rem .5rem;font-size:.82rem}
  .site-header .bar__end{gap:.45rem}
}
@media (max-width:360px){
  .hero{grid-template-columns:1fr}
  .hero__visual{grid-template-columns:1fr 1fr;grid-template-rows:auto;min-height:180px}
}
@media (max-width:860px){
  :root{--head:132px}
  .site-header .theme-toggle{display:none}
  .site-header .pill--yellow{display:inline-flex}
}
#contact input,#contact select,#contact textarea{background:#fff9ef;color:#18334a;border-color:#14547a}
.price-card__status{color:#18334a}

/* Restore the original warm L JAI theme and animated planet bubbles. */
:root[data-theme="light"]{color-scheme:light;--paper:#e4e3d9;--ink:#d93a2b;--deep:#14122b;--mist:#eee5d9;--text:#38334c;--hi:#f2e57a;--on-hi:#14122b;--washi:#fff8ec;--sumi:#14122b;--shu:#d93a2b;--sakura:#f6a5c0;--lav:#c4c1ec;--cream-y:#d7c89a}
:root[data-theme="light"] body{background-color:var(--paper);background-image:radial-gradient(rgba(20,18,43,.045) .7px,transparent .7px);background-size:7px 7px}
:root[data-theme="dark"]{color-scheme:dark;--paper:#272230;--ink:#ff8575;--deep:#fff1e8;--mist:#453a4a;--text:#f2e6e1;--hi:#f1dc70;--on-hi:#211c29;--washi:#342d3c;--sumi:#f7e9e1;--shu:#ff8172;--sakura:#704c69;--lav:#51485f;--cream-y:#bdae7b}
:root[data-theme="dark"] body{background-color:var(--paper);background-image:radial-gradient(rgba(255,255,255,.045) .7px,transparent .7px);background-size:7px 7px}
.site-header .bar{background:var(--washi);border:3px solid var(--sumi);border-radius:22px;box-shadow:6px 6px 0 var(--shu)}
.site-header .brand__txt{color:var(--sumi)}
.site-header .lang{border:2.5px solid var(--sumi);border-radius:14px;overflow:hidden;background:var(--lav);box-shadow:3px 3px 0 var(--sumi)}
.site-header .lang button{color:var(--sumi)}
.site-header .lang button+button{border-left:2.5px solid var(--sumi)}
.site-header .lang button[aria-pressed=true]{background:var(--sumi);color:var(--washi)}
.site-header .nav a{color:var(--sumi)}
.site-header .nav a:hover,.site-header .nav a.active{background:var(--sakura);border-color:var(--sumi);color:var(--sumi)}
.site-header .pill--pink{background:var(--sakura);color:var(--sumi);border-color:var(--sumi);box-shadow:3px 3px 0 var(--sumi)}
.site-header .pill--yellow{background:var(--cream-y);color:var(--on-hi);border-color:var(--sumi);box-shadow:3px 3px 0 var(--sumi)}
.site-header .theme-toggle{background:var(--lav);color:var(--sumi);border-color:var(--sumi);box-shadow:3px 3px 0 var(--sumi)}
.site-header .menu-btn{background:var(--lav);color:var(--sumi);border-color:var(--sumi)}
.hero{display:block;position:relative;min-height:100svh;padding:0 var(--rail);scroll-margin-top:0}
.hero__copy{position:absolute;left:50%;top:calc(var(--head) + 18%);transform:translateX(-50%);width:min(520px,34vw);min-width:340px;max-width:none;padding:0;background:none;border-radius:0;display:block;color:var(--text);text-align:center;z-index:2}
.hero__copy h1{color:var(--deep);font-size:clamp(2.1rem,4.4vw,3.6rem);max-width:none}
.hero__copy p{color:var(--text);font-size:1.0625rem;line-height:1.65}
.hero__copy .actions{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:.8rem}
.hero__copy .btn{background:var(--ink);border-color:var(--ink);color:var(--on-hi);box-shadow:none}
.hero__copy .btn--line{background:transparent;color:var(--ink)}
.hero__copy .note{color:var(--ink);text-align:center;margin:1rem auto 0;font-size:1.5rem}
.sky{display:block;position:absolute;inset:var(--head) 0 0 0;height:auto;z-index:1}
.sec>h2{padding:0;border-radius:0;background:none;color:var(--deep);font-size:clamp(1.8rem,3vw,2.5rem);margin:0 0 .6em}
.sec>.lead{color:#9aa5e6}
.tile,.work{border:2px solid var(--ink);border-radius:20px;background:rgba(142,160,255,.08);color:var(--text);box-shadow:5px 5px 0 rgba(142,160,255,.3)}
.tile h3,.tile p,.work h3,.work p{color:var(--deep)}
.tile--design{background:linear-gradient(160deg,#2b3aa6,#1b2677);border-color:#c9d1ff}
.tile--design h3,.tile--design p{color:#fff}
.tile--dev{background:rgba(142,160,255,.08)}
.tile--care{background:rgba(142,160,255,.08)}
.tile--cta{background:var(--hi);border-color:var(--hi);color:var(--on-hi)}
.tile--cta h3{color:var(--on-hi)}
.work{background:rgba(255,248,236,.68)}
.work:nth-child(2n){background:rgba(142,160,255,.08);color:var(--text)}
.work:nth-child(2n) h3,.work:nth-child(2n) p{color:var(--deep)}
.work .thumb{border:2px solid var(--ink);background:var(--paper)}
.price-card{border:2px solid var(--ink);border-radius:20px;background:rgba(255,248,236,.72);color:var(--text);box-shadow:5px 5px 0 rgba(142,160,255,.2)}
.price-card h3,.price-card ul{color:var(--deep)}
.price-card--featured{background:var(--washi);border-color:var(--shu);box-shadow:5px 5px 0 rgba(217,58,43,.2)}
.price-card--featured h3,.price-card--featured ul{color:var(--sumi)}
.price-card__price,.price-card__status{color:var(--ink)}
.price-card__payments button{background:var(--lav);color:var(--sumi);border-color:var(--sumi);box-shadow:2px 2px 0 var(--sumi)}
.pricing-note{color:var(--text)}
#contact.sec{padding:5.5rem 1.5rem;margin:0 auto;background:none;border-radius:0;color:var(--text)}
#contact h2{color:var(--deep)}
#contact p{color:var(--text)}
#contact input,#contact select,#contact textarea{background:#fff;color:var(--sumi);border-color:var(--sumi)}
.site-footer p{color:var(--text)}
@media (max-width:1040px){.site-header .pill--yellow{display:none}}
@media (max-width:860px){
  :root{--head:98px}
  .site-header .theme-toggle{display:grid}
  .site-header .bar{flex-wrap:wrap}
  .site-header .nav{background:var(--washi);border:3px solid var(--sumi);border-radius:18px;top:calc(100% + 10px);box-shadow:6px 6px 0 var(--shu);align-items:flex-start}
  .bar__end{width:100%;justify-content:space-between}
  .hero{display:flex;flex-direction:column;min-height:100svh;padding-top:var(--head)}
  .hero__copy{position:static;transform:none;width:auto;min-width:0;padding:2rem 1.5rem 0;background:none;border-radius:0;text-align:center}
  .hero__copy h1{font-size:clamp(2.1rem,4.4vw,3.6rem)}
  .hero__copy .actions{flex-direction:row;justify-content:center;align-items:center}
  .hero__copy .note{text-align:center;margin:1rem auto 0}
  .sky{position:relative;inset:auto;height:560px;flex:0 0 560px}
}
@media (max-width:560px){
  .brand__mark{width:42px;height:42px}
  .brand__txt{font-size:1.12rem;letter-spacing:.09em}
  .site-header .bar{padding:.45rem .55rem}
  .bar__start{gap:.4rem}
  .bar__start .brand{gap:.4rem}
  .bar__start .lang button{padding:.35rem .5rem;font-size:.82rem}
  .site-header .bar__end{gap:.45rem}
  .hero__copy .actions{flex-wrap:wrap}
}

/* Requested mode colors and compact navigation buttons. */
:root[data-theme="light"]{color-scheme:light;--paper:#102f52;--ink:#eaa0b7;--deep:#fff1df;--mist:#22496c;--text:#f3e9dd;--hi:#f4a12c;--on-hi:#15324d;--washi:#fff8ec;--sumi:#142c46;--shu:#d9413a;--sakura:#f6bfd0;--lav:#ddd8ef;--cream-y:#f4a12c}
:root[data-theme="light"] body{background-color:#102f52;background-image:radial-gradient(rgba(255,255,255,.05) .7px,transparent .7px);background-size:7px 7px}
:root[data-theme="dark"]{color-scheme:dark;--paper:#08090d;--ink:#f1a4b8;--deep:#fff1df;--mist:#252831;--text:#f0e8df;--hi:#f3a02a;--on-hi:#101820;--washi:#17181d;--sumi:#fff1df;--shu:#d9413a;--sakura:#6e485b;--lav:#2a2b31;--cream-y:#f3a02a}
:root[data-theme="dark"] body{background-color:#08090d;background-image:radial-gradient(rgba(255,255,255,.035) .7px,transparent .7px);background-size:7px 7px}
.bar__start{gap:1.25rem}
.site-header .nav a{display:inline-flex;align-items:center;min-height:40px;padding:.42rem .9rem;background:var(--sakura);border:2px solid var(--sumi);border-radius:11px;color:var(--sumi);font-weight:700;text-decoration:none;text-underline-offset:0;transition:background .18s,translate .18s,box-shadow .18s}
.site-header .nav a:hover,.site-header .nav a.active{background:var(--sakura);border-color:var(--sumi);color:var(--sumi);translate:-1px -1px;box-shadow:2px 2px 0 var(--sumi)}
.site-header .pill--yellow{background:#f4a12c;color:#142c46;border-color:#142c46;box-shadow:3px 3px 0 var(--shu)}
:root[data-theme="dark"] .site-header .bar{background:#17181d;border-color:#393a40}
:root[data-theme="dark"] .site-header .lang{background:#202126;border-color:#55565c}
:root[data-theme="dark"] .site-header .lang button{color:#fff1df}
:root[data-theme="dark"] .site-header .lang button+button{border-color:#55565c}
:root[data-theme="dark"] .site-header .lang button[aria-pressed=true]{background:#f3a02a;color:#101820}
:root[data-theme="dark"] .site-header .nav a{background:#25262c;border-color:#515259;color:#fff1df}
:root[data-theme="dark"] .site-header .nav a:hover,:root[data-theme="dark"] .site-header .nav a.active{background:#e99eb2;border-color:#fff1df;color:#17181d}
:root[data-theme="dark"] .site-header .pill--yellow{background:#f3a02a;color:#101820;border-color:#f3a02a}
@media (max-width:860px){.bar__start{gap:.7rem}}

/* Wider, two-column auth dialogs for sign-in and account creation. */
#auth.panel{width:min(880px,92vw);max-width:880px}
#auth-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;column-gap:1.25rem;row-gap:.55rem}
#auth-form h2{grid-column:1/-1;text-align:center}
#auth-form label{text-align:left;margin-bottom:.65rem}
#auth-form .status,#auth-form .btn,#auth-form .link{grid-column:1/-1}
#auth-form .btn{justify-self:center}
#auth-form .link{text-align:center}
@media (max-width:600px){
  #auth.panel{width:min(92vw,560px);max-width:560px}
  #auth-form{grid-template-columns:minmax(0,1fr);column-gap:0}
  #auth-form h2,#auth-form .status,#auth-form .btn,#auth-form .link{grid-column:1}
}

/* Give the L JAI brand clear visual weight in the header. */
:root{--head:108px}
.site-header .brand{gap:.65rem;padding:.18rem .8rem .18rem .2rem;border:1.5px solid rgba(217,65,58,.38);border-radius:16px;background:rgba(217,65,58,.07);box-shadow:2px 2px 0 rgba(20,44,70,.12)}
.brand__mark{width:60px;height:60px;filter:drop-shadow(1px 2px 0 rgba(20,44,70,.2))}
.brand__txt{font:700 1.72rem/1 "Baskerville Old Face",Baskerville,"Palatino Linotype",Georgia,serif;letter-spacing:.14em;color:var(--sumi);text-shadow:0 1px 0 rgba(255,255,255,.3)}
@media (max-width:860px){:root{--head:132px}}
@media (max-width:560px){
  .site-header .brand{gap:.38rem;padding:.12rem .38rem .12rem .12rem;border-radius:13px}
  .brand__mark{width:46px;height:46px}
  .brand__txt{font-size:1.08rem;letter-spacing:.07em}
  .bar__start{gap:.55rem}
}

/* Signed-in profile page, following the user's paper sketch. */
.account-page{width:min(1120px,calc(100% - 2rem));min-height:calc(100vh - var(--head) - 100px);margin:2rem auto 4rem;padding:clamp(1.4rem,4vw,3rem);border:2px solid var(--sumi);border-radius:26px;background:var(--washi);color:var(--sumi);box-shadow:7px 7px 0 var(--shu)}
.account-page[hidden]{display:none!important}
.account-page__top{display:flex;justify-content:space-between;align-items:center;padding-bottom:1.2rem;border-bottom:2px solid color-mix(in srgb,var(--sumi) 22%,transparent)}
.account-page h1{font:700 clamp(2rem,4vw,3.25rem)/1.05 var(--f-head);margin:.2rem 0}
.account-eyebrow{font:700 .75rem/1.2 var(--f-body);letter-spacing:.15em;color:var(--shu);margin:0}
.account-home{display:inline-flex;align-items:center;gap:.6rem;padding:.65rem 1.05rem;border:2px solid var(--sumi);border-radius:999px;background:var(--sakura);color:var(--sumi);font-weight:700;text-decoration:none;box-shadow:3px 3px 0 var(--sumi)}
.account-layout{display:grid;grid-template-columns:minmax(210px,.7fr) minmax(0,1.6fr);gap:clamp(1.5rem,4vw,4rem);padding-top:clamp(1.5rem,4vw,3rem)}
.account-rail{display:flex;flex-direction:column;align-items:flex-start;padding:1.6rem;border:1px solid color-mix(in srgb,var(--sumi) 22%,transparent);border-radius:20px;background:color-mix(in srgb,var(--washi) 80%,var(--sakura));min-height:340px}
.account-avatar{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;border:2px solid var(--shu);background:var(--sumi);color:var(--washi);font:700 1.45rem/1 Georgia,serif;box-shadow:4px 4px 0 var(--shu)}
.account-rail h2{margin:1.2rem 0 .2rem;font:700 1.4rem/1.15 var(--f-head);overflow-wrap:anywhere}
.account-email{margin:0 0 1.6rem;opacity:.75;overflow-wrap:anywhere}
.account-home--rail{margin:0 0 .8rem}
.account-text-button{display:flex;justify-content:space-between;width:100%;padding:.9rem 0;border:0;border-top:1px solid color-mix(in srgb,var(--sumi) 20%,transparent);background:none;color:var(--sumi);font:600 1rem/1.3 var(--f-body);text-align:left;cursor:pointer}
.account-signout{margin-top:auto;color:var(--shu)}
.account-details{padding:clamp(1.25rem,3vw,2.4rem);border:2px solid var(--sumi);border-radius:20px;background:var(--washi);box-shadow:4px 4px 0 color-mix(in srgb,var(--sumi) 20%,transparent)}
.account-details__heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
.account-details__heading h2{font:700 clamp(1.5rem,3vw,2.2rem)/1.15 var(--f-head);margin:.5rem 0 0;overflow-wrap:anywhere}
.account-sakura{font-size:2.2rem;color:var(--shu)}
.account-detail-row{display:grid;grid-template-columns:minmax(100px,.6fr) minmax(0,1.4fr);gap:1rem;padding:1rem 0;border-bottom:1px solid color-mix(in srgb,var(--sumi) 18%,transparent)}
.account-detail-row span{opacity:.68}.account-detail-row strong{font-weight:600;overflow-wrap:anywhere;white-space:pre-line}
.account-note{margin:1.3rem 0 0;color:var(--shu);font-family:var(--f-script,var(--f-body))}
#auth-btn.is-profile{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.profile-active .site-footer{display:none}
@media(max-width:640px){.account-page{width:calc(100% - 1rem);margin:1rem auto 2rem;padding:1rem;border-radius:18px}.account-layout{grid-template-columns:1fr;gap:1rem}.account-rail{min-height:0}.account-signout{margin-top:.5rem}.account-detail-row{grid-template-columns:1fr;gap:.25rem}.account-page__top{align-items:flex-start}}

#main > section[hidden]{display:none!important}

/* Signed-in username opens the member's gallery, shaped from the supplied sketch. */
.personal-gallery__intro{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:1.2rem 0 1.6rem;color:var(--sumi);opacity:.82}
.personal-gallery__intro p{margin:0}.personal-gallery__intro .account-signout{width:auto;margin:0;padding:.55rem .9rem;border:1.5px solid var(--sumi);border-radius:999px;opacity:1;white-space:nowrap}
.personal-gallery__filters{display:flex;justify-content:center;gap:.65rem;margin:0 auto 1.8rem}
.personal-gallery__filters button{padding:.55rem 1.2rem;border:1.5px solid var(--sumi);border-radius:999px;background:transparent;color:var(--sumi);font:700 .95rem/1.2 var(--f-body);cursor:pointer;transition:background .18s,transform .18s,box-shadow .18s}
.personal-gallery__filters button:hover{transform:translateY(-2px)}
.personal-gallery__filters button[aria-pressed="true"]{background:var(--sakura);box-shadow:3px 3px 0 var(--sumi)}
.personal-gallery__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.personal-work{min-width:0}.personal-work[hidden]{display:none!important}
.gallery-art{position:relative;display:flex;min-height:190px;aspect-ratio:1.15;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;border:1.5px solid color-mix(in srgb,var(--sumi) 30%,transparent);border-radius:16px;color:#172744;box-shadow:3px 4px 0 color-mix(in srgb,var(--sumi) 20%,transparent);isolation:isolate;transition:transform .2s,box-shadow .2s}
.personal-work:hover .gallery-art{transform:translateY(-4px) rotate(-.4deg);box-shadow:5px 8px 0 color-mix(in srgb,var(--sumi) 22%,transparent)}
.gallery-art::before,.gallery-art::after{position:absolute;z-index:-1;content:"";inset:0}
.gallery-art b{font:700 clamp(1.25rem,2vw,2rem)/.98 var(--f-head);text-align:center;letter-spacing:-.04em}
.gallery-art i{position:absolute;left:13px;bottom:11px;font:700 .6rem/1 var(--f-body);font-style:normal;letter-spacing:.14em}
.art-mark{font-size:2.3rem;line-height:1;margin-bottom:.35rem;color:#d9413a;text-shadow:0 2px 0 #fff4e8}
.art-sakura{background:radial-gradient(ellipse at 50% 88%,#f5a4b7 0 12%,transparent 13%),linear-gradient(145deg,#fff8ec 5%,#f5d5cb 52%,#e89cab)}
.art-sakura::before{inset:auto 8% 13%;height:27%;border-radius:50%;background:linear-gradient(0deg,#394f48 0 22%,#6b9671 23% 38%,transparent 39%);filter:blur(1px)}
.art-coast{background:linear-gradient(165deg,#f9dbc5 0 36%,#e99d85 37% 48%,#577f91 49% 71%,#233f5d 72%)}
.art-coast::before{background:radial-gradient(ellipse at 72% 64%,#fff2cf 0 3%,transparent 3.5%),linear-gradient(174deg,transparent 55%,rgba(255,245,218,.55) 56% 57%,transparent 58%)}
.art-garden{background:linear-gradient(145deg,#f6e7ce,#bdd0a4 48%,#547b68)}
.art-garden::before{background:radial-gradient(ellipse at 25% 60%,#f5aab9 0 8%,transparent 9%),radial-gradient(ellipse at 68% 55%,#fff1dc 0 10%,transparent 11%),radial-gradient(ellipse at 47% 77%,#d989a2 0 13%,transparent 14%)}
.art-sun{background:linear-gradient(160deg,#ffe6b8,#edaa68 58%,#9c635c)}
.art-sun::before{background:radial-gradient(circle at 50% 42%,#fff5cf 0 14%,#f5d584 15% 22%,transparent 23%),linear-gradient(0deg,rgba(82,60,75,.55),transparent 60%)}
.art-logo{background:#f7eee0}.logo-round{display:grid;place-items:center;width:76px;height:76px;margin-bottom:.55rem;border:2px solid #d9413a;border-radius:50%;background:#fff8ec;color:#142c46;font:700 1.7rem/1 Georgia,serif;box-shadow:inset 0 0 0 5px #f3dccb}.art-logo b{font:700 1.3rem/1 Georgia,serif;letter-spacing:.16em}.art-logo--two{background:#dce9dc}.art-logo--two .logo-round{color:#d9413a;border-color:#476a5b}.art-logo--three{background:#e9d5c1}.art-logo--three .logo-round{background:#142c46;color:#fff1df;border-color:#d98b48}
.art-video{background:linear-gradient(140deg,#f2b6c4 0 35%,#d77985 36% 63%,#5a5368 64%)}
.art-video::before{background:radial-gradient(circle at 76% 22%,rgba(255,247,223,.9) 0 8%,transparent 9%),linear-gradient(0deg,rgba(30,37,59,.48),transparent 65%)}
.art-video--two{background:linear-gradient(145deg,#fff3df,#eea8b9 45%,#a75272)}.art-video--three{background:linear-gradient(135deg,#d9c1a7,#96765d 48%,#35455c)}
.video-play{display:grid;place-items:center;width:42px;height:42px;margin-bottom:.45rem;padding-left:3px;border:1px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(20,35,56,.28);color:white;font-size:.95rem;backdrop-filter:blur(4px)}
.art-video b{color:#fff8ec;text-shadow:0 2px 8px rgba(25,30,46,.25)}.art-video i{color:#fff8ec}
.personal-work h2{margin:.8rem 0 .15rem;color:var(--sumi);font:700 1.05rem/1.2 var(--f-head)}.personal-work p{margin:0;color:var(--sumi);opacity:.72;font-size:.88rem}
@media(max-width:900px){.personal-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.personal-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.gallery-art{min-height:145px}.personal-gallery__intro{align-items:flex-start}.personal-gallery__intro p{max-width:68%}.personal-gallery__filters{margin-bottom:1.2rem}}
@media(max-width:390px){.personal-gallery__grid{grid-template-columns:1fr}.gallery-art{aspect-ratio:1.45}}
.personal-gallery__intro .account-password-button{width:auto;margin:0;padding:.55rem .9rem;border:1.5px solid var(--sumi);border-radius:999px;opacity:1;white-space:nowrap;color:var(--sumi)}
.personal-gallery__intro .account-signout{margin:0}
.personal-gallery__intro{flex-wrap:wrap}

/* Accessible show/hide control for the shared sign-in and create-account password field. */
.password-input-wrap{position:relative;width:100%;display:block}
#auth-form .password-input-wrap input{width:100%;padding-right:3.3rem}
.password-visibility{position:absolute;right:.55rem;top:50%;display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;transform:translateY(-50%);border:0;border-radius:9px;background:transparent;color:var(--sumi);cursor:pointer;box-shadow:none}
.password-visibility:hover{background:color-mix(in srgb,var(--sakura) 55%,transparent)}
.password-visibility:focus-visible{outline:2px solid var(--shu);outline-offset:2px}
.password-visibility svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.password-visibility .eye-slash{display:block}
.password-visibility.is-visible .eye-slash{display:none}

/* Profile sketch layout: member details beside their personal gallery. */
.account-rail__details{width:100%;margin:0 0 1rem;border-top:1px solid color-mix(in srgb,var(--sumi) 20%,transparent)}
.account-rail__details>div{display:grid;gap:.25rem;padding:.75rem 0;border-bottom:1px solid color-mix(in srgb,var(--sumi) 16%,transparent)}
.account-rail__details span{font-size:.82rem;opacity:.68}.account-rail__details strong{font-size:.92rem;font-weight:600;overflow-wrap:anywhere;white-space:pre-line}
.account-gallery-user{max-width:42%;padding:.4rem .7rem;border:1px solid color-mix(in srgb,var(--shu) 55%,transparent);border-radius:999px;background:color-mix(in srgb,var(--sakura) 38%,transparent);font-size:.82rem;font-weight:700;overflow-wrap:anywhere;text-align:center}
.account-details .personal-gallery__filters{justify-content:flex-start;margin:.2rem 0 1.3rem}
.account-details .personal-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}
.account-details .gallery-art{min-height:145px}
.account-details .personal-work h2{font-size:.98rem}
.account-details .personal-work p{font-size:.8rem}
@media(max-width:900px){.account-details .personal-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.account-rail{padding:1.2rem}.account-details{padding:1rem}.account-details .personal-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.account-details .gallery-art{min-height:125px}.account-gallery-user{max-width:48%}}

/* Increase profile page heading contrast and center the gallery controls. */
.account-page h1{color:var(--sumi);font-weight:800;letter-spacing:-.035em;text-shadow:0 1px 0 color-mix(in srgb,var(--sumi) 12%,transparent)}
.account-details__heading{flex-direction:column;justify-content:center;gap:.55rem;text-align:center}
.account-details__heading h2{color:var(--sumi);font-weight:800;font-size:clamp(2rem,3.2vw,2.65rem);letter-spacing:-.035em;margin:.25rem 0}
.account-gallery-user{max-width:100%}
.account-details .personal-gallery__filters{justify-content:center;flex-wrap:wrap;margin:.8rem auto 1.4rem}

/* Profile photo chooser and saved avatar preview. */
.account-avatar{position:relative;overflow:hidden;flex:none}
.account-avatar #account-avatar-initials[hidden],.account-avatar #account-avatar-image[hidden]{display:none}
.account-avatar #account-avatar-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.account-photo-button{display:inline-flex;align-items:center;justify-content:center;margin:.9rem 0 .2rem;padding:.48rem .85rem;border:1.5px solid var(--sumi);border-radius:999px;background:var(--washi);color:var(--sumi);font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:2px 2px 0 var(--sumi);transition:transform .16s,box-shadow .16s,background .16s}
.account-photo-button:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--sumi);background:var(--sakura)}
.account-photo-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.account-photo-input:focus-visible+.account-photo-status{outline:2px solid var(--shu);outline-offset:3px}
.account-photo-status{min-height:1em;margin:.2rem 0 .8rem;color:var(--sumi);font-size:.78rem;line-height:1.35}

/* Keep the avatar on the left and make the account username editable beside it. */
.account-identity{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:start;gap:1rem;width:100%;margin-bottom:1.1rem}
.account-identity__photo{min-width:0}.account-identity__copy{min-width:0;padding-top:.45rem}
.account-identity__copy .account-email{margin:.4rem 0 0;font-size:.86rem;overflow-wrap:anywhere}
.account-username-line{display:flex;align-items:center;gap:.45rem;min-width:0}
.account-username-line h2{margin:0;min-width:0;font:800 clamp(1rem,1.4vw,1.3rem)/1.15 var(--f-head);overflow-wrap:anywhere;color:var(--sumi)}
.account-edit-button{flex:none;padding:.35rem .6rem;border:1.5px solid var(--sumi);border-radius:9px;background:var(--sakura);color:var(--sumi);font:700 .78rem/1.1 var(--f-body);cursor:pointer}
.account-edit-button:hover{filter:brightness(.96)}
.account-username-form{display:grid;gap:.4rem;margin-top:.5rem}
.account-username-form[hidden]{display:none!important}
.account-username-form label{font-size:.78rem;font-weight:700;color:var(--sumi)}
.account-username-form input{width:100%;min-width:0;padding:.45rem .55rem;border:1.5px solid var(--sumi);border-radius:8px;background:var(--washi);color:var(--sumi);font:600 .9rem var(--f-body)}
.account-username-form input:focus-visible{outline:2px solid var(--shu);outline-offset:2px}
.account-username-actions{display:flex;gap:.4rem}
.account-username-status{min-height:1em}
#account-username-status{margin:0;font-size:.75rem;line-height:1.3;color:var(--sumi);overflow-wrap:anywhere}
@media(max-width:640px){.account-identity{grid-template-columns:84px minmax(0,1fr);gap:.75rem}.account-identity__copy{padding-top:.2rem}.account-username-line{align-items:flex-start;flex-wrap:wrap}}

/* Dedicated gallery screen opened by the profile's Home control. */
.member-gallery-page{position:relative;width:min(1120px,calc(100% - 2rem));min-height:calc(100vh - var(--head) - 90px);margin:2rem auto 4rem;padding:clamp(1.4rem,4vw,3rem);border:2px solid var(--sumi);border-radius:26px;background:var(--washi);color:var(--sumi);box-shadow:7px 7px 0 var(--shu)}
.member-gallery-page[hidden]{display:none!important}
.member-gallery-page__top{display:flex;justify-content:space-between;align-items:center}
.member-gallery-page h1{margin:1rem 0 .35rem;text-align:center;color:var(--sumi);font-size:clamp(2.5rem,5vw,4rem);font-weight:800;letter-spacing:-.04em}
.member-gallery-page__owner{margin:0 0 1.4rem;text-align:center;color:var(--sumi);opacity:.76}
.member-gallery-page__owner strong{color:var(--shu);opacity:1}
.member-gallery-page .personal-gallery__filters{justify-content:center;flex-wrap:wrap;margin:0 auto 1.7rem}
.member-gallery-page .personal-gallery__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.member-gallery-page .gallery-art{min-height:180px}
.account-rail .account-home--rail{width:100%;justify-content:flex-start;margin:.65rem 0 0;border-radius:12px}
@media(max-width:900px){.member-gallery-page .personal-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.member-gallery-page{width:calc(100% - 1rem);margin:1rem auto 2rem;padding:1rem;border-radius:18px}.member-gallery-page .personal-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.member-gallery-page .gallery-art{min-height:140px}.member-gallery-page__top{gap:.5rem}.member-gallery-page__top .account-home{padding:.5rem .75rem}}
@media(max-width:390px){.member-gallery-page .personal-gallery__grid{grid-template-columns:1fr}.member-gallery-page .gallery-art{aspect-ratio:1.45}}
.member-gallery-page .account-eyebrow{margin:0}
.art-moon{background:linear-gradient(155deg,#192e4b 0 38%,#697b90 39% 60%,#e2a6a4 61%)}
.art-moon .art-mark{color:#fff1df}.art-moon::before{background:radial-gradient(circle at 70% 30%,#fff2d1 0 10%,transparent 10.5%),linear-gradient(0deg,rgba(24,43,64,.55),transparent 60%)}
.art-field{background:linear-gradient(165deg,#f4d6b0 0 38%,#b6c59a 39% 62%,#587765 63%)}
.art-field::before{background:radial-gradient(ellipse at 30% 70%,#f9e8bc 0 4%,transparent 5%),radial-gradient(ellipse at 70% 76%,#ec9da6 0 5%,transparent 6%),linear-gradient(0deg,rgba(37,71,54,.42),transparent 45%)}
.art-logo--four{background:#d7e5df}.art-logo--four .logo-round{color:#22666a;border-color:#22666a;background:#f5f1e3}
.art-logo--five{background:#f5d3d0}.art-logo--five .logo-round{color:#8f4659;border-color:#8f4659;background:#fff1e8}
.art-logo--six{background:#e7e0f1}.art-logo--six .logo-round{color:#443a67;border-color:#443a67;background:#faf5e8}
.art-logo--four b{color:#22666a}.art-logo--five b{color:#8f4659}.art-logo--six b{color:#443a67}
.art-video--four{background:linear-gradient(135deg,#ffdc88,#ef917e 48%,#744c75)}
.art-video--five{background:linear-gradient(155deg,#d7e9dd,#96b6a5 48%,#465c68)}
.art-video--six{background:linear-gradient(145deg,#f6ead6,#d6b58d 44%,#4d596e)}
.account-home--rail{gap:.42rem;flex-wrap:wrap;min-height:48px;padding:.55rem .65rem;font-size:.88rem}
.account-home__username{min-width:0;flex:1;overflow-wrap:anywhere;font-size:.76rem;font-weight:800;letter-spacing:.025em}
#member-gallery-page > .member-gallery-page__owner{display:block;width:100%;margin:0 auto 1.4rem;text-align:center!important}

/* Centered, keyboard-accessible previews for every gallery tile. */
.personal-work{cursor:pointer}
.personal-work:focus-visible{outline:3px solid var(--shu);outline-offset:4px;border-radius:12px}
.personal-work:hover h2{text-decoration:underline;text-decoration-color:var(--shu);text-underline-offset:3px}
.gallery-preview{position:fixed;inset:0;margin:auto;width:min(780px,calc(100vw - 2rem));max-width:none;max-height:min(92dvh,980px);overflow:auto;padding:clamp(1.2rem,3vw,2.2rem);border:2px solid var(--sumi);border-radius:24px;background:var(--washi);color:var(--sumi);box-shadow:8px 8px 0 var(--shu)}
.gallery-preview::backdrop{background:rgba(9,16,31,.68);backdrop-filter:blur(4px)}
.gallery-preview__close{position:sticky;top:0;float:right;z-index:2;display:grid;place-items:center;width:40px;height:40px;margin:-.4rem -.4rem 0 0;border:2px solid var(--sumi);border-radius:11px;background:var(--sakura);color:var(--sumi);font-size:1.55rem;font-weight:800;line-height:1;cursor:pointer;box-shadow:2px 2px 0 var(--sumi)}
.gallery-preview>.account-eyebrow{margin:.2rem 3.2rem .25rem 0;text-align:center}
.gallery-preview>h2{clear:both;margin:.3rem 0 1rem;color:var(--sumi);font-size:clamp(1.55rem,4vw,2.25rem);font-weight:800;text-align:center}
.gallery-preview__media{display:grid;place-items:center;min-height:260px;padding:clamp(.5rem,2vw,1rem);border:1px solid color-mix(in srgb,var(--sumi) 20%,transparent);border-radius:18px;background:color-mix(in srgb,var(--washi) 84%,var(--sakura))}
.gallery-preview__still{width:min(100%,620px);min-height:clamp(300px,56vw,520px);aspect-ratio:1.15;border-radius:18px}
.gallery-preview__still b{font-size:clamp(2rem,6vw,4rem)}
.gallery-preview__still .art-mark{font-size:clamp(2.8rem,7vw,4.5rem)}
.gallery-preview__canvas{display:block;width:min(100%,680px);height:auto;aspect-ratio:8/5;border:1px solid color-mix(in srgb,var(--sumi) 18%,transparent);border-radius:16px}
.gallery-preview__description{margin:.8rem 0;text-align:center;color:var(--sumi);opacity:.75}
.gallery-preview__actions{display:flex;justify-content:center;gap:.65rem;margin-top:.8rem}
.gallery-preview__actions button{min-height:40px;padding:.55rem 1rem}
.gallery-preview__actions button:disabled{opacity:.65;cursor:wait}
.gallery-preview__status{min-height:1.2em;margin:.65rem 0 0;text-align:center;color:var(--sumi);font-size:.87rem}
@media(max-width:600px){.gallery-preview{width:calc(100vw - 1rem);max-height:94dvh;padding:1rem;border-radius:18px}.gallery-preview__media{min-height:220px;padding:.45rem}.gallery-preview__still{min-height:300px}.gallery-preview__actions{flex-wrap:wrap}}
/* Offset the standalone gallery screen below the fixed navigation. */
.member-gallery-page{margin-top:calc(var(--head) - 2rem)}
@media(max-width:620px){.member-gallery-page{margin-top:calc(var(--head) - .75rem)}}

/* Keep the gallery compact: six tiles in view, with the remaining tiles in the inner scroll area. */
.account-details .personal-gallery__grid{max-height:min(500px,65vh);overflow-y:auto;overflow-x:hidden;align-content:start;padding:.25rem .35rem .6rem;overscroll-behavior:contain;scrollbar-gutter:stable}
.account-details .gallery-art{height:145px;min-height:145px;aspect-ratio:auto}
.member-gallery-page .personal-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:min(650px,80vh);overflow-y:auto;overflow-x:hidden;align-content:start;padding:.3rem .4rem .7rem;overscroll-behavior:contain;scrollbar-gutter:stable}
.member-gallery-page .gallery-art{height:180px;min-height:180px;aspect-ratio:auto}
@media(max-width:640px){
  .account-details .personal-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:min(620px,80vh)}
  .account-details .gallery-art{height:125px;min-height:125px}
  .member-gallery-page .personal-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:min(650px,80vh)}
  .member-gallery-page .gallery-art{height:140px;min-height:140px}
}

/* Small camera shortcut sits over the avatar instead of a separate photo button. */
.account-avatar #account-avatar-initials{position:relative;z-index:1}
.account-avatar #account-avatar-image{z-index:0}
.account-avatar-camera{position:absolute;right:2px;bottom:2px;z-index:3;display:grid;place-items:center;width:28px;height:28px;padding:4px;border:1.5px solid var(--sumi);border-radius:50%;background:var(--sakura);color:var(--sumi);cursor:pointer;box-shadow:1px 1px 0 var(--sumi);transition:transform .15s,background .15s}
.account-avatar-camera:hover{transform:scale(1.08);background:var(--washi)}
.account-avatar-camera:focus-visible{outline:2px solid var(--shu);outline-offset:2px}
.account-avatar-camera svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}