@font-face{font-family:Inter;src:url('/assets/inter-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/inter-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/inter-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Work Sans';src:url('/assets/work-sans-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Work Sans';src:url('/assets/work-sans-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Work Sans';src:url('/assets/work-sans-700.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--site-font:Sora,sans-serif;--shape-large:32px;--shape-small:16px;--shape-control:999px;--shape-panel:24px;--shape-float:24px}
[data-font=inter]{--site-font:Inter,sans-serif}[data-font=work-sans]{--site-font:'Work Sans',sans-serif}
body{font-family:var(--site-font);padding-top:72px}button,input,select,textarea{font-family:inherit}html{scroll-padding-top:104px}
.navbar{position:fixed;inset:0 0 auto;z-index:30;padding:0;border:0;background:transparent;pointer-events:none;transition:padding .32s ease,top .32s ease}
.navbar .nav-inner{width:100%;height:72px;max-width:none;padding:0 var(--margin);gap:16px;background:var(--container-color-primary);border-bottom:1px solid var(--border-color-tertiary);pointer-events:auto;transition:background .25s,border-radius .3s,box-shadow .3s;position:relative}
.navbar .identity{width:200px;font-size:24px}.navbar .desktop-nav{flex:1;gap:32px;font-size:14px}.nav-actions{width:200px;display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-shrink:0}
.navbar .nav-call{display:inline-flex;min-height:40px;padding:6px 24px;font-size:14px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:opacity .22s,transform .3s,visibility .22s}
.navbar.is-scrolled{top:16px;padding:0 24px}.navbar.is-scrolled .nav-inner{max-width:1200px;border:1px solid var(--border-color-secondary);border-radius:var(--shape-float);padding:0 24px;box-shadow:0 8px 32px #0000000d;background:color-mix(in srgb,var(--container-color-primary) 90%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.navbar.is-scrolled .nav-call{visibility:visible;opacity:1;pointer-events:auto;transform:none}.navbar.is-scrolled .identity{width:160px}
.appearance{position:relative;flex-shrink:0}.appearance-toggle{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:7px;border:1px solid var(--border-color-primary);border-radius:var(--shape-control);isolation:isolate}.current-theme-icon{position:relative}.theme-hover{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:inherit;z-index:-1}.theme-hover img{opacity:0;transition:opacity .2s}.appearance-toggle:hover,.appearance-toggle[aria-expanded=true]{background:var(--container-color-secondary)}.appearance-toggle:hover .theme-hover img{opacity:1}
.appearance-panel[hidden]{display:none}.appearance-panel{position:absolute;top:52px;right:0;width:360px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 116px);overflow-y:auto;overscroll-behavior:contain;padding:24px;background:var(--container-color-primary);color:var(--ink);border:1px solid var(--border-color-secondary);border-radius:var(--shape-panel);box-shadow:0 16px 56px #0000001f;text-align:left;animation:panel-in .22s ease both}
@keyframes panel-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.appearance-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:24px}.appearance-heading strong{font-size:16px;font-weight:600;line-height:26px}.appearance-heading p{font-size:12px;line-height:22px;color:var(--muted);margin-top:2px}.appearance-close{font-size:24px;line-height:24px;width:28px;height:28px;display:grid;place-items:center;padding:0;border-radius:var(--shape-small);color:var(--muted)}.appearance-close:hover{background:var(--container-color-secondary)}
.appearance-panel fieldset{border:0;padding:0;margin:0 0 20px;min-width:0}.appearance-panel legend{font-size:12px;font-weight:600;line-height:20px;margin-bottom:8px;padding:0;color:var(--muted)}.theme-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.appearance-panel label{position:relative;cursor:pointer;min-width:0}.appearance-panel input{position:absolute;opacity:0;width:1px;height:1px;left:10px;top:10px}.theme-option>span{display:flex;align-items:center;gap:8px;min-height:48px;border:1px solid var(--border-color-secondary);border-radius:var(--shape-small);padding:10px;font-size:11px;line-height:18px}.theme-option img{flex-shrink:0}.option-check{margin-left:auto;opacity:0;font-size:12px}.appearance-panel input:checked+span{background:var(--container-color-secondary);border-color:var(--font-color-primary)}.appearance-panel input:checked+span>.option-check{opacity:1}.appearance-panel input:focus-visible+span{outline:3px solid var(--border-color-action);outline-offset:2px}.appearance-panel label:hover>span{background:var(--container-color-secondary)}
.segmented-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.segmented-options label>span{border:1px solid var(--border-color-secondary);border-radius:var(--shape-small);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:76px;padding:12px 4px;font-size:12px;line-height:18px}.shape-sample{width:24px;height:20px;border:1.5px solid currentColor;display:block}.rounded-sample{border-radius:10px}.default-sample{border-radius:5px}.sharp-sample{border-radius:0}.font-options b{font-size:24px;line-height:26px;font-weight:500}.sample-sora{font-family:Sora,sans-serif}.sample-inter{font-family:Inter,sans-serif}.sample-work-sans{font-family:'Work Sans',sans-serif}
.appearance-footer{border-top:1px solid var(--border-color-secondary);padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted)}.appearance-reset{font-size:12px;text-decoration:underline;text-underline-offset:4px;padding:4px;color:var(--ink)}
[data-theme=dark] .appearance img[src$="theme-light.svg"],[data-theme=dark] .appearance img[src$="theme-dark.svg"]{filter:invert(1)}
.gallery-page .navbar:not(.is-scrolled) .nav-inner{background:transparent;border-color:#ffffff29;color:white}.gallery-page .navbar:not(.is-scrolled) .appearance-toggle{border-color:#ffffff80}.gallery-page .navbar:not(.is-scrolled) .appearance-toggle>.current-theme-icon[src$="theme-light.svg"],.gallery-page .navbar:not(.is-scrolled) .appearance-toggle>.current-theme-icon[src$="theme-dark.svg"]{filter:invert(1)}
.gallery-page .navbar.is-scrolled{color:var(--ink)}.gallery-page .navbar.is-scrolled .desktop-nav,.gallery-page .navbar.is-scrolled .desktop-nav a[aria-current=page]{color:var(--ink)}.gallery-page .navbar.is-scrolled .menu-toggle span{background:var(--ink)}.gallery-page .navbar.is-scrolled .nav-call{border-color:var(--line)}
.navbar #mobile-nav{pointer-events:auto;top:80px;left:16px;right:16px;border:1px solid var(--border-color-secondary);border-radius:var(--shape-panel);box-shadow:0 16px 40px #0002}
/* Apply the preference to UI surfaces; icon geometry and sample glyphs stay legible. */
[data-radius=rounded]{--shape-large:48px;--shape-small:24px;--shape-control:999px;--shape-panel:32px;--shape-float:999px;--radius:48px}
[data-radius=sharp]{--shape-large:0px;--shape-small:0px;--shape-control:0px;--shape-panel:0px;--shape-float:0px;--radius:0px}
:is([data-radius=rounded],[data-radius=sharp]) :is(.hero-image,.project,.sharing-inner,.review,.design-card,.article-cover,.experience-item,.toolbox,dialog,.article-body .figma-block){border-radius:var(--shape-large)!important}
:is([data-radius=rounded],[data-radius=sharp]) :is(.button,.availability,.tag,.coming-label,.design-stats){border-radius:var(--shape-control)!important}
:is([data-radius=rounded],[data-radius=sharp]) :is(.event,.company-icon,.tool-icons>.figma-block,.photo-gallery a){border-radius:var(--shape-small)!important}
[data-radius=sharp] :is(.identity img,.review-avatar,.article-body img,.about-photo img,.brand-logo,.fill-image){border-radius:0!important}
:is([data-radius=rounded],[data-radius=sharp]) .about-photo{clip-path:inset(0 48px round var(--shape-large))}
@media(max-width:1100px){.navbar .identity{width:130px}.navbar .desktop-nav{gap:20px;font-size:12px}.nav-actions{width:180px;gap:12px}.navbar.is-scrolled .identity{width:130px}.navbar .nav-call{padding-inline:16px;font-size:12px}:is([data-radius=rounded],[data-radius=sharp]) .about-photo{clip-path:inset(0 24px round var(--shape-large))}}
@media(max-width:850px){.navbar .desktop-nav{display:none}.navbar .identity{width:auto;font-size:20px}.nav-actions{width:auto;gap:8px}.navbar.is-scrolled{top:8px;padding:0 12px}.navbar.is-scrolled .nav-inner{padding:0 12px;height:64px}.navbar.is-scrolled .identity{width:auto}.navbar .nav-call{padding:6px 12px}.appearance-panel{position:fixed;top:80px;right:16px;max-height:calc(100dvh - 96px)}.navbar.is-scrolled .appearance-panel{top:80px}.navbar .menu-toggle{flex-shrink:0}.navbar #mobile-nav{top:80px}.navbar.is-scrolled #mobile-nav{top:72px}}
@media(max-width:650px){:root[data-radius=default]{--shape-large:16px}.appearance-panel{padding:20px;width:344px}.navbar .nav-inner{gap:8px}:is([data-radius=rounded],[data-radius=sharp]) .about-photo{clip-path:inset(0 16px round var(--shape-large))}}
@media(max-width:360px){.navbar.is-scrolled .identity>span{display:none}.appearance-panel{padding:16px}.theme-option>span{padding:8px;font-size:10px;gap:6px}}
@media(prefers-reduced-motion:reduce){.navbar,.navbar .nav-inner,.navbar .nav-call{transition:none}.appearance-panel{animation:none}}
.appearance-panel label>input{inset:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}
@media(max-width:850px){.appearance{position:static}.appearance-panel{position:absolute;right:16px;top:80px}.navbar.is-scrolled .appearance-panel{right:0;top:72px}}
@media(max-width:850px){.navbar:not(.is-scrolled) .nav-call{display:none}}

/* Header and appearance motion share the global motion tokens from styles.css. */
[data-theme-switching] *,[data-theme-switching] *::before,[data-theme-switching] *::after{transition:none!important}
.navbar{transition:padding var(--motion-slow,360ms) var(--ease-move,cubic-bezier(.25,1,.5,1)),top var(--motion-slow,360ms) var(--ease-move,cubic-bezier(.25,1,.5,1))}
.navbar .nav-inner{transition:background-color var(--motion-medium,240ms) ease,border-color var(--motion-medium,240ms) ease,border-radius var(--motion-slow,360ms) var(--ease-move,cubic-bezier(.25,1,.5,1)),box-shadow var(--motion-medium,240ms) var(--ease-enter,cubic-bezier(.22,1,.36,1)),max-width var(--motion-slow,360ms) var(--ease-move,cubic-bezier(.25,1,.5,1))}
.navbar .nav-call{transition:opacity 180ms ease,transform var(--motion-medium,240ms) var(--ease-enter,cubic-bezier(.22,1,.36,1)),visibility 180ms}
.appearance-toggle{transition:background-color var(--motion-medium,240ms) ease,border-color var(--motion-medium,240ms) ease,transform var(--motion-medium,240ms) var(--ease-enter,cubic-bezier(.22,1,.36,1))}
.appearance-toggle:active{transform:scale(.96)}
.appearance-panel{transform-origin:top right;animation:panel-in var(--motion-medium,240ms) var(--ease-enter,cubic-bezier(.22,1,.36,1)) both}
.theme-option>span,.segmented-options label>span{transition:background-color var(--motion-medium,240ms) ease,border-color var(--motion-medium,240ms) ease,transform var(--motion-fast,140ms) var(--ease-enter,cubic-bezier(.22,1,.36,1))}
@media(hover:hover) and (pointer:fine){.theme-option:hover>span,.segmented-options label:hover>span{transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.appearance-toggle,.theme-option>span,.segmented-options label>span{transition:none}}
/* The active page is a frosted surface; its corner shape follows the user's preference. */
.desktop-nav a{padding:8px 12px;border-radius:var(--shape-control);transition:background-color var(--motion-medium,240ms) ease,color var(--motion-medium,240ms) ease}.desktop-nav a[aria-current=page]{text-decoration:none;color: var(--ink);background:color-mix(in srgb,var(--container-color-secondary) 72%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gallery-page .navbar:not(.is-scrolled) .appearance-toggle>.current-theme-icon{filter:brightness(0) invert(1)!important}.gallery-page .navbar:not(.is-scrolled) .desktop-nav a[aria-current=page]{background:#ffffff24;color:#fff}

.navbar .desktop-nav{gap:16px}.appearance-panel{top:64px;width:440px}.theme-options{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-option>span{justify-content:flex-start;flex-direction:column;gap:8px;padding:10px 12px;font-size:12px}.option-check{display:none}
@media(max-width:850px){
body.menu-open,body.appearance-open{overflow:hidden}
.navbar #mobile-nav{position:fixed;inset:0;z-index:35;width:100vw;height:100dvh;display:flex;flex-direction:column;gap:0;padding:112px 32px 32px;background:var(--container-color-primary);color:var(--ink);border:0;border-radius:0;box-shadow:none;pointer-events:auto;overflow-y:auto;transform:translateX(100%);opacity:0;transition:transform 280ms cubic-bezier(.22,1,.36,1),opacity 280ms ease}
.navbar #mobile-nav[hidden]{display:none}.navbar #mobile-nav.is-open{transform:translateX(0);opacity:1}.navbar #mobile-nav>a{font-size:28px;line-height:1.25;padding:20px 0;border-bottom:1px solid var(--border-color-secondary)}
.nav-actions{z-index:36}.navbar:has(#mobile-nav.is-open) .menu-toggle span{background:var(--ink)}
.appearance-panel{position:fixed!important;inset:0!important;z-index:40;width:100vw!important;height:100dvh;max-width:none!important;max-height:none!important;padding:48px 24px 32px;border:0;border-radius:0;overflow-y:auto;pointer-events:auto;animation:none}.appearance-panel .theme-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.navbar.is-scrolled:has(#mobile-nav.is-open) .nav-inner,.navbar.is-scrolled:has(.appearance-panel:not([hidden])) .nav-inner{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){.navbar #mobile-nav{transition:none}}