@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300&display=swap";@import "https://fonts.googleapis.com/css2?family=Shadows+Into+Light:wght@400&display=swap";@import "https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap";:root{--kanso-ink-900:#1a1a1a;--kanso-ink-800:#2a2a2a;--kanso-ink-700:#3d3d3d;--kanso-ink-600:#5c5c5c;--kanso-ink-500:#8a8a8a;--kanso-ink-400:#b5b5b5;--kanso-ink-300:#d4d4d4;--kanso-ink-200:#e5e5e5;--kanso-ink-100:#efefef;--kanso-ink-050:#f5f5f5;--kanso-ink-000:#fff;--kanso-accent-700:#b11f5e;--kanso-accent-600:#c42569;--kanso-accent-500:#dd2773;--kanso-accent-100:#fce6ee;--kanso-accent-050:#fdf3f7;--kanso-success-600:#2f7d5b;--kanso-success-500:#3f9b72;--kanso-success-100:#e6f1ec;--kanso-warning-600:#a8741a;--kanso-warning-500:#c68a24;--kanso-warning-100:#f6eedf;--kanso-danger-600:#b23b3b;--kanso-danger-500:#c94b4b;--kanso-danger-100:#f7e5e5;--kanso-info-600:#3a6e8f;--kanso-info-500:#4d87ab;--kanso-info-100:#e5eef4;--bg-canvas:var(--kanso-ink-050);--bg-surface:var(--kanso-ink-000);--bg-subtle:var(--kanso-ink-100);--bg-tinted:var(--kanso-accent-050);--fg-primary:var(--kanso-ink-900);--fg-secondary:var(--kanso-ink-600);--fg-tertiary:var(--kanso-ink-500);--fg-disabled:var(--kanso-ink-400);--fg-on-accent:var(--kanso-ink-000);--fg-accent:var(--kanso-accent-500);--border-subtle:var(--kanso-ink-200);--border-default:var(--kanso-ink-300);--border-strong:var(--kanso-ink-700);--focus-ring:#dd277352;--font-sans:"Inter Tight", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fs-display:clamp(32px, 2rem + 2.5vw, 56px);--fs-h1:clamp(24px, 1.4rem + 1.4vw, 36px);--fs-h2:clamp(18px, 1.05rem + .7vw, 22px);--fs-body:clamp(14px, .85rem + .2vw, 16px);--fs-label:13px;--lh-display:1.15;--lh-heading:1.25;--lh-body:1.55;--lh-label:1.4;--ls-display:-.022em;--ls-heading:-.014em;--ls-body:-.005em;--ls-label:0;--ls-eyebrow:.06em;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:28px;--space-7:40px;--space-8:56px;--space-9:80px;--gutter:clamp(16px, 4vw, 48px);--bp-sm:480px;--bp-md:768px;--bp-lg:1024px;--bp-xl:1440px;--grid-cols:4;--grid-gutter:16px;--content-max:1200px;--reading-max:640px;--touch-min:44px;--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-pill:999px;--shadow-xs:0 1px 2px #1a1a1a0a;--shadow-sm:0 1px 3px #1a1a1a0d, 0 1px 2px #1a1a1a08;--shadow-md:0 4px 12px #1a1a1a0f, 0 1px 3px #1a1a1a0a;--shadow-lg:0 12px 32px #1a1a1a14, 0 2px 6px #1a1a1a0a;--shadow-focus:0 0 0 3px var(--focus-ring);--motion-fast:.12s;--motion-base:.18s;--motion-slow:.26s;--ease-standard:cubic-bezier(.32, .72, 0, 1);--ease-out:cubic-bezier(.22, 1, .36, 1)}@media (width>=768px){:root{--grid-cols:8;--grid-gutter:20px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px}}@media (width>=1024px){:root{--grid-cols:12;--grid-gutter:24px;--space-7:56px;--space-8:80px;--space-9:120px}}.intro-loader{z-index:999;background:var(--bg-canvas);flex-direction:column;justify-content:center;align-items:center;gap:10px;transition:opacity .6s;display:flex;position:fixed;inset:0}.intro-loader--out{opacity:0;pointer-events:none}.intro-loader-label{font-family:var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-tertiary);margin:0;font-size:16px;font-weight:500}.intro-loader-count{font-family:var(--font-sans);letter-spacing:.18em;color:var(--fg-tertiary);font-variant-numeric:tabular-nums;margin:0;font-size:16px;font-weight:500}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-sans);font-feature-settings:"cv11", "ss01", "ss03";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-canvas);color:var(--fg-primary)}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-button{width:0;height:0;display:none}::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:var(--fg-tertiary)}*{scrollbar-width:thin;scrollbar-color:var(--border-default) transparent}.app{grid-template-rows:52px 1fr 60px;grid-template-columns:1fr;height:100vh;display:grid}.app>.topbar{grid-area:1/1/auto/-1}.app>.sidenav{display:none}.app>.bottomnav{background:var(--bg-surface);border-top:1px solid var(--border-subtle);padding:6px 0 calc(6px + env(safe-area-inset-bottom));grid-area:3/1/auto/-1;display:flex}.app>.main{padding:var(--space-5) var(--gutter);grid-area:2/1/auto/-1;overflow:auto}@media (width>=768px){.app{grid-template-rows:56px 1fr;grid-template-columns:64px 1fr}.app>.sidenav{grid-area:2/1;display:block}.app>.bottomnav{display:none}.app>.main{padding:var(--space-6) var(--space-7);grid-area:2/2}}@media (width>=1024px){.app{grid-template-columns:240px 1fr}}.topbar{height:52px;padding:0 var(--gutter);-webkit-backdrop-filter:blur(16px);background:#ffffffc7;border-bottom:1px solid #00000012;align-items:stretch;transition:background .4s,border-color .4s;display:flex}@media (width>=1024px){.topbar{padding:0 var(--space-7)}}@media (width>=1280px){.topbar{padding:0 var(--space-8)}}.topbar--transparent{background:#fff0;border-bottom-color:#0000}.theme-dark .topbar{background:#0c0c0cc7;border-bottom:1px solid #ffffff0f}.theme-dark .topbar--transparent{background:#0c0c0c00;border-bottom-color:#0000}.topbar-inner{width:100%;max-width:var(--content-max);align-items:center;gap:12px;margin:0 auto;display:flex}.topbar .brand{font-family:var(--font-sans);letter-spacing:-.012em;color:var(--fg-primary);cursor:pointer;background:0 0;border:0;align-items:center;gap:2px;padding:0;font-size:15px;font-weight:500;text-decoration:none;display:flex}.topbar .brand:hover{opacity:.7}.brand-logo{width:auto;height:32px;display:block}.brand-logo--dark,.theme-dark .brand-logo--light{display:none}.theme-dark .brand-logo--dark{display:block}.topbar .search{border-radius:var(--radius-md);background:var(--bg-canvas);height:32px;color:var(--fg-tertiary);flex:0 320px;align-items:center;gap:8px;padding:0 10px;display:none}.topbar .search input{font:400 13px/1 var(--font-sans);color:var(--fg-primary);background:0 0;border:0;outline:0;flex:1}.topbar .search input::placeholder{color:var(--fg-tertiary)}.topbar .right{align-items:center;gap:8px;margin-left:auto;display:flex}@media (width>=768px){.topbar{gap:24px;height:56px;padding:0 20px}.topbar .search{display:flex}}.bottomnav{justify-content:space-around;display:flex}.bn-item{cursor:pointer;min-height:48px;color:var(--fg-tertiary);font:500 10px/1.2 var(--font-sans);background:0 0;border:0;flex-direction:column;flex:1;align-items:center;gap:4px;padding:6px 4px;display:flex}.bn-item svg{width:18px;height:18px}.bn-item.on{color:var(--fg-primary)}.bn-item.on svg{color:var(--fg-accent)}.sidenav{background:var(--bg-surface);border-right:1px solid var(--border-subtle);padding:16px 12px;overflow:auto}.sidenav .section{letter-spacing:.06em;text-transform:uppercase;color:var(--fg-tertiary);padding:12px 10px 6px;font-size:11px;font-weight:500}.nav-item{border-radius:var(--radius-sm);font:500 13px/1 var(--font-sans);color:var(--fg-primary);cursor:pointer;transition:background var(--motion-fast);white-space:nowrap;align-items:center;gap:10px;padding:7px 10px;display:flex;overflow:hidden}.nav-item:hover,.nav-item.on{background:var(--bg-canvas)}.nav-item svg{width:14px;height:14px;color:var(--fg-secondary);flex-shrink:0}.nav-item .lbl{text-overflow:ellipsis;overflow:hidden}.nav-item .count{color:var(--fg-tertiary);margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:11px}@media (width>=768px) and (width<=1023px){.sidenav{padding:16px 0}.sidenav .section{display:none}.nav-item{justify-content:center;padding:9px 0}.nav-item .lbl,.nav-item .count{display:none}}.k-btn{border-radius:var(--radius-md);font:500 13px/1 var(--font-sans);cursor:pointer;transition:all var(--motion-base) var(--ease-standard);letter-spacing:-.005em;border:0;align-items:center;gap:6px;padding:9px 14px;display:inline-flex}.k-btn:focus-visible{box-shadow:var(--shadow-focus);outline:0}.k-btn--primary{background:var(--kanso-ink-900);color:var(--kanso-ink-000)}.k-btn--primary:hover{background:var(--kanso-ink-800)}.k-btn--primary:active{background:var(--kanso-ink-700)}.k-btn--accent{background:var(--kanso-accent-500);color:#fff}.k-btn--accent:hover{background:var(--kanso-accent-600)}.k-btn--accent:active{background:var(--kanso-accent-700)}.k-btn--secondary{background:var(--bg-surface);color:var(--fg-primary);box-shadow:inset 0 0 0 1px var(--border-subtle)}.k-btn--secondary:hover{background:var(--bg-canvas)}.k-btn--ghost{color:var(--fg-primary);background:0 0}.k-btn--ghost:hover{background:var(--bg-subtle)}.k-btn:disabled{background:var(--kanso-ink-200);color:var(--fg-disabled);cursor:not-allowed}.k-btn--icon{justify-content:center;width:32px;height:32px;padding:0}.k-btn svg{width:14px;height:14px}.k-btn--icon svg{width:16px;height:16px}@media (pointer:coarse){.k-btn,.k-input,.nav-item,.bn-item{min-height:var(--touch-min)}}@media (hover:none){.k-btn:hover,.nav-item:hover,.project-row:hover{background:inherit}.k-btn--primary:hover{background:var(--kanso-ink-900)}.k-btn--accent:hover{background:var(--kanso-accent-500)}}.k-field{flex-direction:column;gap:6px;display:flex}.k-field>label{color:var(--fg-secondary);font-size:12px;font-weight:500}.k-input{border-radius:var(--radius-md);height:38px;font:400 14px/1 var(--font-sans);color:var(--fg-primary);background:var(--bg-surface);border:1px solid var(--border-subtle);transition:all var(--motion-base) var(--ease-standard);outline:0;width:100%;padding:0 12px}.k-input::placeholder{color:var(--fg-tertiary)}.k-input:focus{border-color:var(--kanso-accent-500);box-shadow:0 0 0 3px #dd27732e}.k-card{background:var(--bg-surface);border-radius:var(--radius-lg);padding:24px}.k-card--elevated{box-shadow:var(--shadow-sm)}.k-card__header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.k-card__title{color:var(--fg-primary);letter-spacing:-.005em;margin:0;font-size:15px;font-weight:500}.k-card__action{color:var(--fg-secondary);cursor:pointer;font-size:13px;text-decoration:none}.k-card__action:hover{color:var(--fg-primary)}.k-tag{border-radius:var(--radius-pill);font:500 11px/1.4 var(--font-sans);align-items:center;gap:6px;padding:3px 10px;display:inline-flex}.k-tag--neutral{background:var(--kanso-ink-300);color:var(--kanso-ink-700)}.k-tag--accent{background:var(--kanso-accent-100);color:var(--kanso-accent-700)}.k-tag--success{background:var(--kanso-success-100);color:var(--kanso-success-600)}.k-tag--warning{background:var(--kanso-warning-100);color:var(--kanso-warning-600)}.k-tag--danger{background:var(--kanso-danger-100);color:var(--kanso-danger-600)}.k-avatar{background:var(--kanso-ink-900);width:28px;height:28px;color:var(--kanso-ink-000);font:500 11px/1 var(--font-sans);border-radius:999px;flex-shrink:0;place-items:center;display:grid}.k-avatar--sm{width:24px;height:24px;font-size:10px}.k-avatar--lg{width:40px;height:40px;font-size:14px}.k-toggle{background:var(--kanso-ink-300);cursor:pointer;width:36px;height:20px;transition:background var(--motion-base);border:0;border-radius:999px;flex-shrink:0;padding:0;position:relative}.k-toggle:after{content:"";width:16px;height:16px;transition:left var(--motion-base);background:#fff;border-radius:999px;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #00000026}.k-toggle.on{background:var(--kanso-accent-500)}.k-toggle.on:after{left:18px}.page-head{gap:var(--space-3);margin-bottom:var(--space-6);flex-direction:column;display:flex}.page-head h1{font-size:var(--fs-h1);letter-spacing:-.018em;color:var(--fg-primary);margin:0 0 4px;font-weight:500}.page-head .sub{font-size:var(--fs-body);color:var(--fg-secondary)}.page-head .actions{flex-wrap:wrap;gap:8px;display:flex}@media (width>=768px){.page-head{flex-direction:row;justify-content:space-between;align-items:center}}.metrics{margin-bottom:var(--space-6);grid-template-columns:1fr 1fr;gap:12px;display:grid}.metric{background:var(--bg-surface);border-radius:var(--radius-lg);padding:var(--space-4)}.metric .lab{color:var(--fg-secondary);margin-bottom:6px;font-size:12px;font-weight:500}.metric .val{letter-spacing:-.018em;color:var(--fg-primary);margin-bottom:6px;font-size:22px;font-weight:500;line-height:1}.metric .delta{color:var(--kanso-success-600);font-size:12px;font-weight:500}.metric .delta--down{color:var(--kanso-danger-600)}@media (width>=768px){.metrics{grid-template-columns:repeat(4,1fr);gap:16px}.metric{padding:20px}.metric .val{font-size:28px}}.project-list{background:var(--bg-surface);border-radius:var(--radius-lg);padding:4px 0}.project-row{cursor:pointer;transition:background var(--motion-fast);min-height:var(--touch-min);align-items:center;gap:12px;padding:14px 16px;display:flex}.project-row+.project-row{border-top:1px solid var(--kanso-ink-300)}.project-row:hover{background:var(--bg-canvas)}.project-row .icon{border-radius:var(--radius-md);background:var(--bg-canvas);width:32px;height:32px;color:var(--fg-secondary);flex-shrink:0;place-items:center;display:grid}.project-row .icon svg{width:16px;height:16px}.project-row .body{flex:1;min-width:0}.project-row .title{color:var(--fg-primary);letter-spacing:-.005em;margin-bottom:2px;font-size:14px;font-weight:500}.project-row .meta{color:var(--fg-tertiary);font-size:12px}.project-row .stack{display:none}.project-row .stack .k-avatar{box-shadow:0 0 0 2px var(--bg-surface);margin-left:-6px}.project-row .stack .k-avatar:first-child{margin-left:0}.project-row .chev{color:var(--kanso-ink-400);flex-shrink:0}.project-row .chev svg{width:16px;height:16px}@media (width>=768px){.project-row{gap:16px;padding:16px 24px}.project-row .icon{width:36px;height:36px}.project-row .stack{display:flex}}.files-table{background:var(--bg-surface);border-radius:var(--radius-lg);overflow:hidden}.files-row{min-height:var(--touch-min);grid-template-columns:24px 1fr;align-items:center;gap:12px;padding:12px 16px;display:grid}.files-row .col-type,.files-row .col-size,.files-row .col-when{display:none}.files-row+.files-row{border-top:1px solid var(--kanso-ink-300)}.files-row.head{letter-spacing:.06em;text-transform:uppercase;color:var(--fg-tertiary);font-size:11px;font-weight:500;display:none}.files-row svg{width:16px;height:16px;color:var(--fg-secondary)}.files-row .name{color:var(--fg-primary);font-size:16px;font-weight:500}.files-row .meta{color:var(--fg-secondary);font-size:12px}@media (width>=768px){.files-row{grid-template-columns:32px 1fr 120px 100px 80px;gap:16px;padding:14px 24px}.files-row .col-type,.files-row .col-size,.files-row .col-when{display:block}.files-row.head{padding-top:18px;padding-bottom:12px;display:grid}}.settings-grid{flex-direction:column;gap:24px;max-width:880px;display:flex}.settings-side{flex-direction:row;gap:4px;padding-bottom:4px;display:flex;overflow-x:auto}.settings-side .group{display:none}.settings-side .item{border-radius:var(--radius-sm);font:500 13px/1 var(--font-sans);color:var(--fg-primary);cursor:pointer;min-height:var(--touch-min);white-space:nowrap;flex-shrink:0;align-items:center;padding:8px 12px;display:inline-flex}.settings-side .item.on,.settings-side .item:hover{background:var(--bg-subtle)}@media (width>=1024px){.settings-grid{grid-template-columns:200px 1fr;gap:48px;display:grid}.settings-side{flex-direction:column;overflow:visible}.settings-side .group{letter-spacing:.06em;text-transform:uppercase;color:var(--fg-tertiary);padding:6px 0;font-size:11px;font-weight:500;display:block}.settings-side .item{min-height:0;display:block}}.settings-card{background:var(--bg-surface);border-radius:var(--radius-lg);margin-bottom:16px;padding:20px}.settings-card h2{letter-spacing:-.005em;margin:0 0 4px;font-size:16px;font-weight:500}.settings-card .desc{color:var(--fg-secondary);margin:0 0 20px;font-size:13px}.settings-row{flex-direction:column;gap:8px;padding:16px 0;display:flex}.settings-row+.settings-row{border-top:1px solid var(--kanso-ink-300)}.settings-row .lab{color:var(--fg-primary);font-size:16px;font-weight:500}.settings-row .help{color:var(--fg-tertiary);margin-top:2px;font-size:12px}@media (width>=768px){.settings-card{padding:28px}.settings-row{grid-template-columns:200px 1fr;align-items:center;gap:24px;display:grid}}.scrim{z-index:50;background:#1a1a1a52;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.modal{background:var(--bg-surface);width:100%;padding:24px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:var(--shadow-lg);border-radius:16px 16px 0 0}.modal h3{letter-spacing:-.012em;margin:0 0 8px;font-size:18px;font-weight:500}.modal p{color:var(--fg-secondary);margin:0 0 20px;font-size:14px;line-height:1.55}.modal .actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:20px;display:flex}@media (width>=768px){.scrim{align-items:center}.modal{border-radius:var(--radius-xl);width:420px;padding:28px}}.back-crumb{color:var(--fg-tertiary);cursor:pointer;transition:color var(--motion-fast);align-items:center;gap:4px;margin-bottom:16px;font-size:12px;display:inline-flex}.back-crumb:hover{color:var(--fg-secondary)}.back-crumb svg{width:12px;height:12px}.empty{text-align:center;padding:80px 24px}.empty .icon{border-radius:var(--radius-lg);background:var(--bg-surface);width:48px;height:48px;color:var(--fg-tertiary);place-items:center;margin:0 auto 16px;display:grid}.empty h3{color:var(--fg-primary);margin:0 0 4px;font-size:16px;font-weight:500}.empty p{color:var(--fg-secondary);margin:0 0 16px;font-size:13px}.app--ds>.main{grid-column:1/-1}.app--ds-sub{grid-template-columns:1fr}@media (width>=768px){.app--ds-sub{grid-template-columns:240px 1fr}.app--ds-sub>.main{grid-column:2}}@media (width>=1024px){.app--ds-sub{grid-template-columns:260px 1fr}}.ds-nav{background:var(--bg-surface);border-right:1px solid var(--border-subtle);grid-area:2/1;padding:24px 16px;display:none;overflow:auto}@media (width>=768px){.ds-nav{display:block}}.ds-nav-brand{cursor:pointer;text-align:left;background:0 0;border:0;width:100%;margin-bottom:32px;padding:4px 8px;display:block}.ds-nav-brand-name{font-family:var(--font-sans);letter-spacing:-.022em;color:var(--fg-primary);align-items:flex-start;font-size:24px;font-weight:500;line-height:1;display:inline-flex}.ds-nav-brand-dot{background:var(--fg-accent);border-radius:999px;width:8px;height:8px;margin-top:2px;margin-left:3px;display:inline-block}.ds-nav-brand-subtitle{letter-spacing:.18em;text-transform:uppercase;color:var(--fg-tertiary);margin-top:10px;font-size:10px;font-weight:500;display:block}.ds-nav-list{flex-direction:column;gap:2px;display:flex}.ds-nav-item{width:100%;font:500 13px/1 var(--font-sans);color:var(--fg-primary);cursor:pointer;text-align:left;transition:background var(--motion-fast);background:0 0;border:0;border-radius:8px;align-items:center;gap:10px;padding:10px 12px;display:flex}.ds-nav-item:hover{background:var(--bg-canvas)}.ds-nav-item.on{background:var(--kanso-ink-900);color:var(--kanso-ink-000)}.ds-nav-item svg{color:var(--fg-secondary);flex-shrink:0}.ds-nav-item.on svg{color:var(--kanso-ink-000)}.ds-nav-item-label{flex:1}.ds-nav-soon{letter-spacing:.06em;text-transform:uppercase;background:var(--kanso-warning-100);color:var(--kanso-warning-600);border-radius:4px;padding:3px 6px;font-size:9px;font-weight:500;line-height:1}.ds-nav-item.on .ds-nav-soon{color:var(--kanso-ink-000);background:#ffffff29}.ds-nav-sub{border-left:1px solid var(--kanso-ink-200);flex-direction:column;margin:6px 0 10px 18px;padding-left:12px;display:flex}.ds-nav-sub-item{font:500 12px/1.4 var(--font-sans);color:var(--fg-secondary);transition:color var(--motion-fast), background var(--motion-fast);border-radius:4px;padding:6px 10px;text-decoration:none;display:block}.ds-nav-sub-item:hover{color:var(--fg-primary);background:var(--bg-canvas)}.ds-tabs{padding:12px var(--gutter);margin:0 calc(-1 * var(--gutter)) 12px;border-bottom:1px solid var(--kanso-ink-300);-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px;display:flex;overflow-x:auto}.ds-tabs::-webkit-scrollbar{display:none}.ds-tab{border:1px solid var(--border-subtle);font:500 12px/1 var(--font-sans);color:var(--fg-secondary);cursor:pointer;white-space:nowrap;transition:all var(--motion-fast);background:0 0;border-radius:999px;flex-shrink:0;align-items:center;gap:6px;padding:8px 12px;display:inline-flex}.ds-tab svg{flex-shrink:0}.ds-tab:hover{color:var(--fg-primary)}.ds-tab.on{background:var(--kanso-ink-900);color:var(--kanso-ink-000);border-color:var(--kanso-ink-900)}@media (width>=768px){.ds-tabs{display:none}}.ds{max-width:1080px;padding:0 0 var(--space-9);color:var(--fg-primary);margin:0 auto;position:relative}.ds .ds-eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--fg-tertiary);margin-bottom:8px;font-size:11px;font-weight:500}.ds .ds-mono{font-family:var(--font-mono);color:var(--fg-tertiary);font-size:12px;line-height:1.4}.ds-landing{position:relative}.ds-landing:before{content:"";inset:-40px calc(-1 * var(--gutter)) 0;pointer-events:none;z-index:0;background-image:linear-gradient(90deg,#1a1a1a0a 1px,#0000 1px),linear-gradient(#1a1a1a0a 1px,#0000 1px);background-position:-1px -1px;background-size:56px 56px;position:absolute;-webkit-mask-image:linear-gradient(#000 0% 70%,#0000 100%);mask-image:linear-gradient(#000 0% 70%,#0000 100%)}.ds-landing>*{z-index:1;position:relative}.ds-hero{padding:var(--space-7) 0 var(--space-8);grid-template-columns:1fr;align-items:center;gap:24px;display:grid}.ds-hero-text{min-width:0}.ds-hero-byline{letter-spacing:.18em;text-transform:uppercase;color:var(--fg-tertiary);margin-bottom:24px;font-size:11px;font-weight:500}.ds-hero-title{font-family:var(--font-sans);letter-spacing:-.04em;color:var(--fg-primary);margin:0 0 var(--space-4);flex-wrap:wrap;align-items:baseline;gap:18px;font-size:clamp(64px,9vw + 1rem,128px);font-weight:500;line-height:.95;display:flex}.ds-hero-wordmark{align-items:flex-start;display:inline-flex}.ds-hero-dot{background:var(--fg-accent);border-radius:50%;flex-shrink:0;width:.1em;height:.1em;margin-top:.16em;margin-left:.04em;display:inline-block}.ds-hero-version{font-family:var(--font-mono);letter-spacing:.04em;color:var(--fg-tertiary);background:var(--bg-subtle);border-radius:var(--radius-sm);align-self:center;padding:6px 10px;font-size:12px;font-weight:500}.ds-hero-desc{color:var(--fg-secondary);max-width:480px;margin:0;font-size:clamp(15px,.9rem + .3vw,17px);line-height:1.6}.ds-hero-mark{color:var(--kanso-ink-200);text-align:center;-webkit-user-select:none;user-select:none;letter-spacing:.04em;font-family:Noto Sans JP,system-ui,sans-serif;font-size:clamp(120px,18vw,240px);font-weight:200;line-height:1}@media (width>=768px){.ds-hero{padding:var(--space-8) 0 var(--space-9);grid-template-columns:1.2fr 1fr;gap:48px}.ds-hero-mark{text-align:right}}.ds-cards{margin-bottom:var(--space-9);grid-template-columns:1fr;gap:12px;display:grid}@media (width>=600px){.ds-cards{grid-template-columns:1fr 1fr}}@media (width>=1024px){.ds-cards{grid-template-columns:repeat(4,1fr);gap:16px}}.ds-card{background:var(--bg-surface);border:1px solid var(--border-subtle);color:inherit;cursor:pointer;min-height:184px;transition:border-color var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);border-radius:16px;flex-direction:column;gap:16px;padding:20px;text-decoration:none;display:flex;position:relative}.ds-card:hover{border-color:var(--kanso-ink-300);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.ds-card:focus-visible{box-shadow:var(--shadow-focus);outline:0}.ds-card-icon{border-radius:999px;flex-shrink:0;place-items:center;width:36px;height:36px;display:grid}.ds-card-icon--accent{background:var(--kanso-accent-100);color:var(--kanso-accent-600)}.ds-card-icon--info{background:var(--kanso-info-100);color:var(--kanso-info-600)}.ds-card-icon--warning{background:var(--kanso-warning-100);color:var(--kanso-warning-600)}.ds-card-icon--success{background:var(--kanso-success-100);color:var(--kanso-success-600)}.ds-card-body{flex:1;min-width:0}.ds-card-title{letter-spacing:-.008em;color:var(--fg-primary);align-items:center;gap:8px;margin:0 0 6px;font-size:15px;font-weight:500;display:inline-flex}.ds-card-soon{letter-spacing:.06em;text-transform:uppercase;background:var(--kanso-warning-100);color:var(--kanso-warning-600);border-radius:4px;padding:3px 6px;font-size:9px;font-weight:500;line-height:1}.ds-card-desc{color:var(--fg-secondary);margin:0;font-size:13px;line-height:1.5}.ds-card-arrow{color:var(--fg-tertiary);transition:transform var(--motion-base) var(--ease-standard), color var(--motion-base);align-self:flex-end;font-size:16px;line-height:1}.ds-card:hover .ds-card-arrow{color:var(--fg-primary);transform:translate(2px)}.ds-page{padding:var(--space-5) 0 var(--space-9)}.ds-page-head{margin-bottom:var(--space-3);padding:var(--space-4) 0 var(--space-5);border-bottom:1px solid var(--kanso-ink-300)}.ds-page-head .ds-eyebrow{margin-bottom:12px}.ds-page-head h1{font-family:var(--font-sans), Georgia, serif;letter-spacing:-.018em;color:var(--fg-primary);margin:0 0 14px;font-size:clamp(36px,3.5vw + .5rem,56px);font-weight:500;line-height:1.1}.ds-page-head p{color:var(--fg-secondary);max-width:600px;margin:0;font-size:16px;line-height:1.55}.ds-coming-soon{text-align:center;padding:var(--space-9) 24px;flex-direction:column;justify-content:center;align-items:center;min-height:60vh;display:flex}.ds-coming-soon-tag{margin-bottom:24px}.ds-coming-soon h1{font-family:var(--font-sans), Georgia, serif;letter-spacing:-.022em;color:var(--fg-primary);margin:0 0 16px;font-size:clamp(48px,5vw + .5rem,80px);font-weight:500;line-height:1.1}.ds-coming-soon p{color:var(--fg-secondary);max-width:500px;margin:0;font-size:16px;line-height:1.6}.ds-block{padding:var(--space-7) 0;scroll-margin-top:24px}.ds-block+.ds-block{border-top:1px solid var(--kanso-ink-300)}.ds-block-head{margin-bottom:20px}.ds-block-head h2{font-family:var(--font-sans), Georgia, serif;letter-spacing:-.014em;color:var(--fg-primary);margin:0 0 8px;font-size:28px;font-weight:500}.ds-block-head p{color:var(--fg-secondary);max-width:520px;margin:0;font-size:14px;line-height:1.55}.ds-subblock{margin-top:var(--space-6)}.ds-swatch-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;margin-top:12px;display:grid}.ds-swatch{flex-direction:column;gap:8px;display:flex}.ds-swatch-chip{aspect-ratio:4/3;border-radius:8px;width:100%;box-shadow:inset 0 0 0 1px #1a1a1a0f}.ds-swatch-meta{line-height:1.4}.ds-swatch-token{color:var(--fg-primary);font-size:12px;font-weight:500}.ds-swatch-value{font-family:var(--font-mono);color:var(--fg-tertiary);margin-top:1px;font-size:11px}.ds-swatch-use{color:var(--fg-secondary);margin-top:1px;font-size:11px}.ds-semantic-grid{flex-direction:column;gap:12px;margin-top:12px;display:flex}.ds-semantic-row{grid-template-columns:80px repeat(3,1fr);align-items:center;gap:12px;display:grid}.ds-semantic-label{color:var(--fg-primary);font-size:16px;font-weight:500}.ds-semantic-cell{align-items:center;gap:10px;min-width:0;display:flex}.ds-semantic-chip{border-radius:6px;flex-shrink:0;width:24px;height:24px;box-shadow:inset 0 0 0 1px #1a1a1a0f}.ds-semantic-meta{font-family:var(--font-mono);color:var(--fg-tertiary);flex-direction:column;min-width:0;font-size:11px;line-height:1.3;display:flex}@media (width<=600px){.ds-semantic-row{grid-template-columns:64px 1fr 1fr 1fr;gap:8px}.ds-semantic-meta{font-size:10px}}.ds-type-table{border-collapse:collapse;width:100%;margin-top:12px}.ds-type-table td{vertical-align:baseline;border-top:1px solid var(--kanso-ink-300);padding:20px 0}.ds-type-table tr:first-child td{border-top:0;padding-top:0}.ds-type-sample{padding-right:24px}.ds-type-meta{text-align:right;color:var(--fg-secondary);white-space:nowrap;width:1%;font-size:13px}.ds-type-name{color:var(--fg-primary);margin-bottom:4px;font-weight:500}.ds-type-display{letter-spacing:-.022em;font-size:clamp(28px,2vw + 1rem,40px);font-weight:500;line-height:1.15}.ds-type-h1{letter-spacing:-.018em;font-size:28px;font-weight:500;line-height:1.25}.ds-type-h2{letter-spacing:-.014em;font-size:20px;font-weight:500;line-height:1.25}.ds-type-body{color:var(--fg-primary);font-size:15px;font-weight:400;line-height:1.55}.ds-type-label{color:var(--fg-primary);font-size:16px;font-weight:500}.ds-type-eyebrow{letter-spacing:.06em;text-transform:uppercase;color:var(--fg-tertiary);font-size:12px;font-weight:500}.ds-space-list{flex-direction:column;gap:10px;margin-top:12px;display:flex}.ds-space-row{grid-template-columns:80px 1fr 80px;align-items:center;gap:16px;display:grid}.ds-space-token{font-family:var(--font-mono);color:var(--fg-primary);font-size:12px}.ds-space-bar{background:var(--kanso-ink-300);border-radius:2px;max-width:100%;height:12px}.ds-space-meta{font-family:var(--font-mono);color:var(--fg-tertiary);text-align:right;font-size:12px}.ds-radius-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:20px;margin-top:12px;display:grid}.ds-radius-cell{text-align:center;flex-direction:column;align-items:center;gap:8px;display:flex}.ds-radius-tile{background:var(--kanso-ink-300);width:56px;height:56px}.ds-radius-name{color:var(--fg-primary);font-size:12px;font-weight:500}.ds-radius-meta{font-family:var(--font-mono);color:var(--fg-tertiary);font-size:11px}.ds-shadow-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:24px;margin-top:16px;padding:8px 0 16px;display:grid}.ds-shadow-cell{text-align:center;flex-direction:column;align-items:center;gap:12px;display:flex}.ds-shadow-tile{background:var(--bg-surface);border-radius:12px;width:80px;height:80px}.ds-shadow-xs{box-shadow:var(--shadow-xs)}.ds-shadow-sm{box-shadow:var(--shadow-sm)}.ds-shadow-md{box-shadow:var(--shadow-md)}.ds-shadow-lg{box-shadow:var(--shadow-lg)}.ds-comp-row{flex-wrap:wrap;align-items:flex-start;gap:12px;margin-top:12px;display:flex}.ds-bp-table{border-collapse:collapse;width:100%;margin-top:12px;font-size:13px}.ds-bp-table th,.ds-bp-table td{text-align:left;border-bottom:1px solid var(--kanso-ink-300);padding:12px 12px 12px 0}.ds-bp-table th{letter-spacing:.06em;text-transform:uppercase;color:var(--fg-tertiary);font-size:11px;font-weight:500}.ds-bp-table td{color:var(--fg-secondary);vertical-align:top;line-height:1.5}.ds-bp-table td:first-child,.ds-bp-table td:nth-child(2){width:80px;color:var(--fg-primary)}.ds-motion-list{border-top:1px solid var(--kanso-ink-100);flex-direction:column;display:flex}.ds-motion-row{padding:22px var(--space-3);border-bottom:1px solid var(--kanso-ink-100);cursor:pointer;transition:background var(--motion-fast);margin:0 calc(-1 * var(--space-3));grid-template-columns:160px 1fr 220px;align-items:center;gap:24px;display:grid}.ds-motion-row:hover{background:var(--bg-canvas)}.ds-motion-row-label .ds-motion-row-token{color:var(--fg-primary);font-weight:500}.ds-motion-row-value{font-family:var(--font-mono);color:var(--fg-tertiary);margin-top:3px;font-size:11px}.ds-motion-row-use{color:var(--fg-secondary);font-size:13px;line-height:1.5}.ds-motion-track{background:var(--bg-subtle);border-radius:2px;height:4px;position:relative}.ds-motion-dot{background:var(--fg-accent);border-radius:999px;width:12px;height:12px;animation:cubic-bezier(.32,.72,0,1) forwards ds-motion-slide;position:absolute;top:-4px;left:0}@keyframes ds-motion-slide{0%{left:0}to{left:calc(100% - 12px)}}@media (width<=720px){.ds-motion-row{grid-template-columns:1fr;gap:12px}.ds-motion-row-use{font-size:12px}}.ds-easings{grid-template-columns:1fr;gap:16px;margin-top:16px;display:grid}@media (width>=768px){.ds-easings{grid-template-columns:1fr 1fr;gap:20px}}.ds-easing-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;padding:24px}.ds-easing-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;display:flex}.ds-easing-name{color:var(--fg-primary);letter-spacing:-.005em;font-size:14px;font-weight:500}.ds-easing-value{font-size:11px}.ds-easing-svg{background:var(--bg-canvas);border-radius:6px;width:100%;height:140px;padding:12px;display:block}.ds-easing-curve{fill:none;stroke:var(--fg-accent);stroke-width:2px;vector-effect:non-scaling-stroke}.ds-easing-axis{stroke:var(--kanso-ink-200);stroke-width:1px;vector-effect:non-scaling-stroke}.ds-easing-use{color:var(--fg-secondary);margin-top:16px;font-size:12px;line-height:1.5}.ds-easing-track{background:var(--bg-subtle);cursor:pointer;border-radius:2px;height:4px;margin-top:14px;position:relative}.ds-easing-dot{background:var(--fg-accent);border-radius:999px;width:12px;height:12px;animation:forwards ds-motion-slide;position:absolute;top:-4px;left:0}.ds-motion-patterns{border-top:1px solid var(--kanso-ink-100);flex-direction:column;margin-top:16px;display:flex}.ds-motion-pattern{border-bottom:1px solid var(--kanso-ink-100);grid-template-columns:1fr 200px;align-items:center;gap:24px;padding:22px 0;display:grid}.ds-motion-pattern-label{color:var(--fg-primary);margin-bottom:4px;font-size:14px;font-weight:500}.ds-motion-pattern-desc{color:var(--fg-secondary);max-width:480px;font-size:13px;line-height:1.5}.ds-motion-pattern-demo{justify-content:flex-end;display:flex}@media (width<=720px){.ds-motion-pattern{grid-template-columns:1fr;gap:12px}.ds-motion-pattern-demo{justify-content:flex-start}}.page-transition{animation:1.5s cubic-bezier(.22,1,.36,1) page-fade-in}@keyframes page-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.ds-motion-controls{margin-bottom:var(--space-3);align-items:center;gap:12px;display:flex}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.theme-dark{--kanso-ink-000:#181818;--kanso-ink-050:#0e0e0e;--kanso-ink-100:#222;--kanso-ink-200:#2a2a2a;--kanso-ink-300:#3d3d3d;--kanso-ink-400:#5c5c5c;--kanso-ink-500:#8a8a8a;--kanso-ink-600:#b5b5b5;--kanso-ink-700:#d4d4d4;--kanso-ink-800:#e5e5e5;--kanso-ink-900:#f5f5f5}.theme-dark .ds-swatch-chip,.theme-dark .ds-semantic-chip{box-shadow:inset 0 0 0 1px #ffffff14}.theme-dark .ds-landing:before{background-image:linear-gradient(90deg,#ffffff0a 1px,#0000 1px),linear-gradient(#ffffff0a 1px,#0000 1px)}.theme-dark .k-avatar{background:var(--kanso-ink-800);color:var(--kanso-ink-050)}.ds-swatch-contrast{letter-spacing:.04em;font-size:10px;font-weight:500;font-family:var(--font-mono);border-radius:4px;margin-top:4px;padding:2px 6px;display:inline-block}.ds-swatch-contrast--success{background:var(--kanso-success-100);color:var(--kanso-success-600)}.ds-swatch-contrast--warning{background:var(--kanso-warning-100);color:var(--kanso-warning-600)}.ds-swatch-contrast--danger{background:var(--kanso-danger-100);color:var(--kanso-danger-600)}.ds-grid-list{border-top:1px solid var(--kanso-ink-100);flex-direction:column;margin-top:12px;display:flex}.ds-grid-row{border-bottom:1px solid var(--kanso-ink-100);grid-template-columns:140px 1fr 200px;align-items:center;gap:24px;padding:22px 0;display:grid}.ds-grid-row-meta{line-height:1.4}.ds-grid-row-name{color:var(--fg-primary);font-size:16px;font-weight:500}.ds-grid-row-meta .ds-mono{margin-top:3px}.ds-grid-diagram{gap:4px;width:100%;height:32px;display:grid}.ds-grid-col{background:var(--kanso-accent-100);border-radius:2px}.theme-dark .ds-grid-col{background:#dd27732e}.ds-grid-row-stats{color:var(--fg-tertiary);font-size:11px;font-family:var(--font-mono);text-align:right;flex-direction:column;gap:2px;display:flex}@media (width<=720px){.ds-grid-row{grid-template-columns:1fr;gap:12px}.ds-grid-row-stats{text-align:left;flex-flow:wrap;gap:12px}}.ds-behavior-table{border-collapse:collapse;width:100%;margin-top:12px;font-size:13px}.ds-behavior-table th,.ds-behavior-table td{text-align:left;border-bottom:1px solid var(--kanso-ink-100);vertical-align:top;padding:16px 16px 16px 0;line-height:1.5}.ds-behavior-table th{letter-spacing:.06em;text-transform:uppercase;color:var(--fg-tertiary);padding-top:12px;padding-bottom:12px;font-size:11px;font-weight:500}.ds-behavior-table td{color:var(--fg-secondary)}.ds-behavior-name{color:var(--fg-primary);width:130px;font-weight:500}.theme-changing,.theme-changing *,.theme-changing :before,.theme-changing :after{transition:background-color .75s cubic-bezier(.22,1,.36,1),border-color .75s cubic-bezier(.22,1,.36,1),color .75s cubic-bezier(.22,1,.36,1),box-shadow .75s cubic-bezier(.22,1,.36,1),fill .75s cubic-bezier(.22,1,.36,1),stroke .75s cubic-bezier(.22,1,.36,1)!important}.app--portfolio{height:100vh;display:block}.app--portfolio>.topbar{z-index:200;position:fixed;top:0;left:0;right:0}.app--portfolio>.main{height:100vh;padding:0;overflow:auto}.portfolio-hero{min-height:100vh;padding:clamp(40px, 8vh, 80px) var(--gutter);place-items:center;display:grid;position:relative;overflow:hidden}@media (width>=768px){.portfolio-hero{padding:clamp(40px, 8vh, 80px) var(--space-7)}}@media (width>=1280px){.portfolio-hero{padding:clamp(40px, 8vh, 80px) var(--space-8)}}.portfolio-hero-content{z-index:1;width:100%;max-width:880px;position:relative}.portfolio-hero--centered .portfolio-hero-content{text-align:center;margin:0 auto}.portfolio-hero--centered .portfolio-hero-status,.portfolio-hero--centered .portfolio-hero-tagline,.portfolio-hero--centered .portfolio-hero-cta{margin-left:auto;margin-right:auto}.portfolio-hero-subtitle{letter-spacing:.18em;text-transform:uppercase;color:var(--fg-tertiary);margin:var(--space-5) 0 var(--space-6);font-size:clamp(11px,.7rem + .15vw,13px);font-weight:500}.portfolio-hero-sep{color:var(--kanso-ink-300);margin:0 8px;display:inline-block}.portfolio-hero-scroll{letter-spacing:.2em;text-transform:uppercase;color:var(--fg-tertiary);z-index:1;cursor:pointer;transition:color var(--motion-fast);font-size:10px;font-weight:500;font-family:var(--font-sans);background:0 0;border:0;flex-direction:column;align-items:center;gap:6px;padding:8px 12px;display:flex;position:absolute;bottom:28px;left:50%;transform:translate(-50%)}.portfolio-hero-scroll:hover{color:var(--fg-primary)}.portfolio-hero-scroll svg{animation:2s ease-in-out infinite portfolio-scroll-bounce}@keyframes portfolio-scroll-bounce{0%,to{opacity:.6;transform:translateY(0)}50%{opacity:1;transform:translateY(4px)}}@media (prefers-reduced-motion:reduce){.portfolio-hero-scroll svg{animation:none}}.portfolio-petal{width:14px;height:20px;color:var(--fg-accent);opacity:0;pointer-events:none;z-index:0;animation-name:portfolio-petal-fall;animation-timing-function:linear;animation-iteration-count:infinite;position:absolute;top:-36px}.portfolio-petal svg{width:100%;height:100%;display:block}@keyframes portfolio-petal-fall{0%{opacity:0;transform:translate(0)rotate(0)}10%{opacity:.22}90%{opacity:.52}to{transform:translate(var(--petal-drift,60px), calc(100vh - 80px)) rotate(540deg);opacity:0}}@media (prefers-reduced-motion:reduce){.portfolio-petal{display:none}}.portfolio-hero-title,.portfolio-hero-role{font-family:var(--font-sans);letter-spacing:-.04em;margin:0;font-size:clamp(48px,6vw + 1rem,96px);font-weight:500;line-height:1.05}.portfolio-hero-title{color:var(--fg-primary)}.portfolio-hero-name{color:var(--fg-accent)}.portfolio-hero-role{color:var(--fg-tertiary);margin-bottom:var(--space-7)}.portfolio-hero-tagline{font-family:var(--font-sans);color:var(--fg-secondary);max-width:540px;margin:0;font-size:clamp(16px,.95rem + .3vw,20px);line-height:1.6}.portfolio-hero-status{border-radius:var(--radius-pill);background:var(--kanso-success-100);color:var(--kanso-success-600);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--space-5);align-items:center;gap:8px;width:fit-content;padding:6px 12px;font-size:11px;font-weight:500;display:inline-flex}.portfolio-hero-status-dot{background:var(--kanso-success-500);border-radius:999px;width:6px;height:6px;animation:2.4s ease-in-out infinite portfolio-status-pulse}@keyframes portfolio-status-pulse{0%,to{opacity:1}50%{opacity:.35}}.portfolio-hero-status{opacity:0;transition:opacity .55s,transform .55s;transform:translateY(8px)}.portfolio-hero-status.hero-anim-in{opacity:1;transform:none}.portfolio-hero-scroll{opacity:0;transition:color var(--motion-fast), opacity .55s ease, transform .55s ease;transform:translate(-50%)translateY(8px)}.portfolio-hero-scroll.hero-anim-in{opacity:1;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){.portfolio-hero-status,.portfolio-hero-scroll{transition:opacity .55s;transform:none!important}}.portfolio-hero-cta{margin-top:var(--space-6);flex-wrap:wrap;gap:12px;display:flex}.topbar-nav{align-items:center;gap:6px;margin-left:auto;display:flex}.topbar-nav-link{font:500 11px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--motion-fast), background var(--motion-fast);background:0 0;border:0;padding:8px 12px}.topbar-nav-link:hover,.topbar-nav-link.on{color:var(--fg-primary)}.topbar-nav-link:disabled{cursor:default;opacity:.5}.topbar-nav-link:disabled:hover{color:var(--fg-secondary)}.topbar-nav .k-btn--icon{margin-left:6px}@media (width<=767px){.topbar-nav{display:none}}.topbar-mobile-controls{display:none}@media (width<=767px){.topbar-mobile-controls{align-items:center;gap:4px;margin-left:auto;display:flex}}.topbar-mobile-overlay{z-index:190;-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;background:#00000059;transition:opacity .25s;display:none;position:fixed;inset:52px 0 0}@media (width<=767px){.topbar-mobile-overlay{display:block}}.topbar-mobile-overlay.is-open{opacity:1;pointer-events:auto}.topbar-mobile-menu{z-index:191;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);padding:var(--space-2) var(--gutter) var(--space-3);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;display:none;position:fixed;top:52px;left:0;right:0;transform:translateY(-6px)}@media (width<=767px){.topbar-mobile-menu{display:block}}.topbar-mobile-menu.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}.topbar-mobile-menu-list{flex-direction:column;display:flex}.topbar-mobile-menu-item{border:0;border-bottom:1px solid var(--border-subtle);font:500 11px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-secondary);cursor:pointer;text-align:left;width:100%;transition:color var(--motion-fast);background:0 0;padding:14px 4px}.topbar-mobile-menu-item:last-child{border-bottom:none}.topbar-mobile-menu-item:hover{color:var(--fg-primary)}.topbar-mobile-menu-item:disabled{cursor:default;opacity:.5}.topbar-mobile-menu-item:disabled:hover{color:var(--fg-secondary)}.topbar-overlay{z-index:190;-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;background:#00000059;transition:opacity .25s;display:none;position:fixed;inset:52px 0 0}@media (width>=768px){.topbar-overlay{display:block;top:56px}}.topbar-overlay.is-open{opacity:1;pointer-events:auto}.topbar-dropdown{z-index:191;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);padding:var(--space-5) var(--gutter) var(--space-6);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;display:none;position:fixed;top:52px;left:0;right:0;transform:translateY(-6px)}@media (width>=768px){.topbar-dropdown{display:block;top:56px}}.topbar-dropdown.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}.topbar-dropdown-inner{gap:var(--space-4);max-width:var(--content-max);margin:0 auto;display:flex}.topbar-dropdown-card{gap:var(--space-2);cursor:pointer;text-align:left;background:0 0;border:none;flex-direction:column;flex:1;padding:0;transition:opacity .15s;display:flex}.topbar-dropdown-card:hover{opacity:.72}.topbar-dropdown-thumb{aspect-ratio:4/3;border-radius:var(--radius-md);background:var(--bg-subtle);width:100%;overflow:hidden}.topbar-dropdown-thumb img{object-fit:cover;width:100%;height:100%;display:block}.topbar-dropdown-title{letter-spacing:.08em;text-transform:uppercase;color:var(--fg-secondary);padding:0 2px;font-size:11px;font-weight:500}.portfolio-intro{min-height:100vh;padding:var(--space-9) var(--gutter);text-align:center;place-items:center;display:grid}@media (width>=768px){.portfolio-intro{padding:var(--space-9) var(--space-7)}}@media (width>=1280px){.portfolio-intro{padding:var(--space-9) var(--space-8)}}.portfolio-intro-content{width:100%;max-width:880px}.portfolio-intro-text{font-family:var(--font-sans);letter-spacing:-.018em;color:var(--fg-primary);margin:0;font-size:clamp(24px,2.6vw + .5rem,44px);font-weight:500;line-height:1.4}.reveal{opacity:0;filter:blur(6px);will-change:transform, opacity, filter;transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),filter .7s cubic-bezier(.22,1,.36,1);transform:translateY(24px)scale(.97)}.reveal.is-visible{opacity:1;filter:none;transform:translateY(0)scale(1)}@media (prefers-reduced-motion:reduce){.reveal{opacity:1;filter:none;transition:none;transform:none}}.portfolio-scribble{color:var(--fg-accent);letter-spacing:0;font-family:Shadows Into Light;font-size:1.18em;font-weight:700;display:inline-block;transform:rotate(-3deg)translateY(2px)}.portfolio-pill{background:var(--kanso-warning-100);color:var(--kanso-warning-600);border-radius:var(--radius-pill);letter-spacing:0;vertical-align:middle;white-space:nowrap;align-items:center;gap:6px;padding:4px 12px;font-size:.7em;font-weight:500;display:inline-flex}.portfolio-pill-icon{font-size:1.05em;line-height:1}.portfolio-cursor{vertical-align:middle;margin-right:2px;padding:8px 0 0 10px;display:inline-block;position:relative}.portfolio-cursor-arrow{width:14px;height:18px;color:var(--kanso-accent-500);position:absolute;top:0;left:0}.portfolio-cursor-label{background:var(--kanso-accent-500);color:#fff;letter-spacing:0;white-space:nowrap;font-size:.65em;font-weight:500;font-family:var(--font-sans);border-radius:4px;padding:4px 10px;display:inline-block}.portfolio-cursor{animation:14s ease-in-out infinite cursor-wander}@keyframes cursor-wander{0%,to{transform:translate(0)}18%{transform:translate(-12px,-2px)}35%{transform:translate(8px,-2px)}50%{transform:translate(12px,-2px)}68%{transform:translate(4px,-12px)}85%{transform:translate(-2px,-2px)}}@media (prefers-reduced-motion:reduce){.portfolio-cursor{animation:none}}.works{height:240vh;position:relative}@media (width>=1024px){.works{height:320vh}}.works-sticky{height:100vh;padding:0;position:sticky;top:0}@media (width>=1024px){.works-sticky{padding:0 var(--space-7);align-items:center;display:flex}}@media (width>=1280px){.works-sticky{padding:0 var(--space-8)}}.works-inner{flex-direction:column;width:100%;max-width:1200px;height:100%;margin:0 auto;display:flex}@media (width>=1024px){.works-inner{align-items:center;gap:var(--space-8);flex-direction:row}}.works-text-pane{padding:32px var(--gutter) 24px;flex-direction:column;flex:0 0 50%;justify-content:center;display:flex}@media (width>=1024px){.works-text-pane{flex:1;justify-content:flex-start;padding:0}}.works-text{align-items:flex-start;gap:var(--space-3);flex-direction:column;max-width:480px;display:flex}@media (width>=1024px){.works-text{gap:var(--space-4)}}.works-text>*{will-change:transform, opacity, filter;animation:.5s cubic-bezier(.33,1,.68,1) backwards works-slot-roll}.works-text>:first-child{animation-delay:0s}.works-text>:nth-child(2){animation-delay:80ms}.works-text>:nth-child(3){animation-delay:.16s}.works-text>:nth-child(4){animation-delay:.24s}.works-text>:nth-child(5){animation-delay:.32s}@keyframes works-slot-roll{0%{opacity:0;filter:blur(4px);transform:translateY(18px)}to{opacity:1;filter:none;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.works-text>*{animation:none}}.works-pagination{font-family:var(--font-mono);color:var(--fg-tertiary);letter-spacing:.06em;font-size:12px}.works-pagination-sep{color:var(--kanso-ink-300);margin:0 4px}.works-title{font-family:var(--font-sans);letter-spacing:-.02em;color:var(--fg-primary);margin:0;font-size:clamp(28px,6vw,40px);font-weight:500;line-height:1.05}@media (width>=1024px){.works-title{font-size:clamp(36px,4vw + .5rem,56px)}}.works-description{color:var(--fg-secondary);margin:0;font-size:14px;line-height:1.55}@media (width>=1024px){.works-description{font-size:clamp(15px,.9rem + .3vw,18px)}}.works-tags{flex-wrap:wrap;gap:6px;display:flex}.works-tag{background:var(--bg-subtle);color:var(--fg-secondary);border-radius:var(--radius-pill);padding:4px 10px;font-size:11px;font-weight:500;display:inline-flex}@media (width>=1024px){.works-tag{padding:5px 12px;font-size:12px}}.works-cta{border:1px solid var(--border-default);border-radius:var(--radius-md);font:500 11px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-primary);cursor:pointer;width:fit-content;margin-top:var(--space-2);transition:background var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard);background:0 0;align-items:center;gap:8px;padding:11px 18px;display:inline-flex}@media (width>=1024px){.works-cta{margin-top:var(--space-3)}}.works-cta:hover{background:var(--fg-primary);color:var(--bg-surface);border-color:var(--fg-primary)}.works-cta svg{transition:transform var(--motion-base)}.works-cta:hover svg{transform:translate(3px)}.works-cover-container{flex:0 0 50%;width:100%;position:relative;overflow:hidden}@media (width>=1024px){.works-cover-container{flex:0 0 45%;align-self:stretch;width:45%;overflow:visible}}.works-cover{--tx:0%;--scale:1;transform:translateY(var(--tx)) scale(var(--scale));will-change:transform, opacity;transition:opacity .7s cubic-bezier(.33,1,.68,1),transform .7s cubic-bezier(.33,1,.68,1);position:absolute;inset:0}@media (width>=1024px){.works-cover{aspect-ratio:1;width:100%;max-width:544px;transform:translate(-50%, -50%) translateY(var(--tx)) scale(var(--scale));inset:50% auto auto 50%}}@media (prefers-reduced-motion:reduce){.works-cover{transition:none}}.works-cover-inner{width:100%;height:100%}@media (width>=1024px){.works-cover-inner{border-radius:var(--radius-xl);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform;transition:transform 90ms ease-out,box-shadow .28s;overflow:hidden;box-shadow:0 16px 48px #0000002e,0 4px 12px #0000001a}}@media (width>=1024px) and (hover:hover){.works-cover-inner.is-hovering{box-shadow:0 32px 80px #00000042,0 10px 24px #00000024}}@media (prefers-reduced-motion:reduce){.works-cover-inner{transition:none;transform:none!important}}.works-cover img{object-fit:cover;width:100%;height:100%;display:block}@media (width>=1024px){.works-cover img{background:var(--kanso-info-100)}}.skills{padding:var(--space-9) var(--gutter)}@media (width>=768px){.skills{padding:var(--space-9) var(--space-7)}}@media (width>=1280px){.skills{padding:var(--space-9) var(--space-8)}}.skills-inner{max-width:1200px;margin:0 auto}.skills-eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--fg-tertiary);margin-bottom:var(--space-5);font-size:11px;font-weight:500}.skills-grid{border-top:1px solid var(--border-subtle);border-left:1px solid var(--border-subtle);flex-direction:column;display:flex}.skills-row{display:grid}.skills-row--featured,.skills-row--secondary{grid-template-columns:repeat(4,1fr)}.skill-highlight{background:var(--fg-primary);z-index:0;pointer-events:none;will-change:transform, width, height, opacity;transition:transform .4s cubic-bezier(.32,.72,0,1),width .4s cubic-bezier(.32,.72,0,1),height .4s cubic-bezier(.32,.72,0,1),opacity .25s;position:absolute;top:0;left:0}@media (prefers-reduced-motion:reduce){.skill-highlight{transition:opacity .25s}}.skill-cell{z-index:1;padding:var(--space-6) var(--space-4);aspect-ratio:4/3;border-right:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);color:var(--fg-primary);flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:relative}.skill-cell--small{padding:var(--space-4);gap:8px}.skill-icon{aspect-ratio:1;width:100%;max-width:80px;color:var(--fg-primary);transition:color var(--motion-base) var(--ease-standard);place-items:center;display:grid}.skill-icon svg{width:100%;height:100%;display:block}.skill-cell--small .skill-icon{max-width:44px}.skill-label{letter-spacing:.06em;text-transform:uppercase;color:var(--fg-tertiary);text-align:center;transition:color var(--motion-base) var(--ease-standard);font-size:11px;font-weight:500}.skill-cell--small .skill-label{font-size:10px}.skill-cell.is-active .skill-icon,.skill-cell.is-active .skill-label{color:var(--bg-surface)}@media (width<=767px){.skills-row--featured{grid-template-columns:repeat(2,1fr)}.skills-row--featured .skill-cell{aspect-ratio:1;padding:var(--space-4);gap:8px}.skills-row--featured .skill-icon{max-width:44px}.skills-row--secondary{grid-template-columns:repeat(2,1fr)}}.pbar{z-index:200;background:var(--kanso-ink-900);border-radius:20px;flex-direction:column;width:calc(100% - 32px);transition:transform .4s cubic-bezier(.32,.72,0,1),opacity .4s;display:flex;position:fixed;bottom:16px;left:50%;overflow:hidden;transform:translate(-50%)translateY(0);box-shadow:0 8px 32px #0000003d,0 2px 8px #0000001f}@media (width>=768px){.pbar{border-radius:24px;width:660px;max-width:calc(100% - 40px)}}.pbar--hidden{opacity:0;pointer-events:none;transform:translate(-50%)translateY(calc(100% + 24px))}.pbar-nav{flex-direction:column;max-height:0;transition:max-height .65s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.pbar--open .pbar-nav{max-height:380px}.pbar-nav-item{cursor:pointer;color:#fff;text-align:left;letter-spacing:-.01em;background:0 0;border:none;align-items:center;gap:16px;width:100%;padding:8px 14px;font-size:18px;font-weight:500;transition:background .15s;display:flex}.pbar-nav-item:first-child{padding-top:14px}.pbar-nav-item:last-child{padding-bottom:10px}.pbar-nav-item:hover:not(:disabled){background:#ffffff12}.pbar-nav-item:disabled{cursor:default;opacity:.45}.pbar-nav-thumb{background:var(--kanso-ink-800);border-radius:12px;flex-shrink:0;width:64px;height:64px;overflow:hidden}.pbar-nav-thumb img{object-fit:cover;width:100%;height:100%;display:block}.pbar-nav-thumb--home{background:var(--bg-canvas);position:relative;overflow:hidden}.pbar-home-petal{width:6px;color:var(--kanso-accent-500);opacity:0;pointer-events:none;animation-name:pbar-petal-fall;animation-timing-function:linear;animation-iteration-count:infinite;position:absolute;top:-10px}.pbar-home-petal svg{width:100%;height:auto;display:block}@keyframes pbar-petal-fall{0%{opacity:0;transform:translate(0)rotate(0)}8%{opacity:.75}90%{opacity:.5}to{transform:translate(var(--thumb-drift,8px), 74px) rotate(360deg);opacity:0}}@media (prefers-reduced-motion:reduce){.pbar-home-petal{display:none}}.pbar-nav-thumb--works{position:relative}.pbar-thumb-img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .9s;position:absolute;inset:0}.pbar-thumb-img.is-active{opacity:1}.pbar-nav-thumb--wip{background:var(--kanso-ink-700)}.pbar-nav-wip{color:var(--kanso-ink-500);letter-spacing:.08em;text-transform:uppercase;margin-left:8px;font-size:10px;font-style:normal;font-weight:500}.pbar-divider{background:var(--kanso-ink-800);height:1px;margin:0 14px;transition:transform .5s cubic-bezier(.4,0,.2,1) .1s;transform:scaleX(0)}.pbar--open .pbar-divider{transform:scaleX(1)}.pbar-identity{flex-direction:row;flex-shrink:0;align-items:center;gap:10px;height:80px;padding:0 12px 0 10px;display:flex}@media (width>=768px){.pbar-identity{gap:16px;height:100px;padding:0 20px 0 14px}}.pbar-video{background:var(--kanso-ink-800);border-radius:12px;flex-shrink:0;width:58px;height:58px;overflow:hidden}@media (width>=768px){.pbar-video{border-radius:14px;width:74px;height:74px}}.pbar-video video{object-fit:cover;width:100%;height:100%;display:block}.pbar-text{flex:1;min-width:0;overflow:hidden}.pbar-name{letter-spacing:-.01em;color:#fff;margin:0 0 3px;font-size:16px;font-weight:500}@media (width>=768px){.pbar-name{margin:0 0 5px;font-size:20px}}.pbar-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 6% 94%,#0000);mask-image:linear-gradient(90deg,#0000,#000 6% 94%,#0000)}.pbar-track{width:max-content;animation:22s linear infinite pbar-scroll;display:flex}.pbar-items{white-space:nowrap;letter-spacing:-.01em;color:var(--kanso-ink-300);align-items:center;font-size:16px;font-weight:400;display:inline-flex}.pbar-item-wrap{align-items:center;gap:10px;padding-right:10px;display:inline-flex}.pbar-sep{color:var(--kanso-accent-500);font-size:20px}.pbar-menu{width:28px;height:28px;color:var(--kanso-ink-400);cursor:pointer;transition:color var(--motion-base) ease;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.pbar-menu:hover{color:#fff}@keyframes pbar-scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.pbar-track{animation:none}}.theme-dark .pbar{background:var(--bg-subtle);box-shadow:0 8px 32px #00000080,0 2px 8px #0000004d}.theme-dark .pbar-nav-item{color:var(--fg-primary)}.theme-dark .pbar-nav-item:hover:not(:disabled){background:#ffffff0f}.theme-dark .pbar-nav-thumb{background:var(--bg-canvas)}.theme-dark .pbar-nav-thumb--wip{background:var(--border-subtle)}.theme-dark .pbar-nav-wip{color:var(--fg-tertiary)}.theme-dark .pbar-divider{background:var(--border-subtle)}.theme-dark .pbar-video{background:var(--bg-canvas)}.theme-dark .pbar-name{color:var(--fg-primary)}.theme-dark .pbar-items{color:var(--fg-secondary)}.theme-dark .pbar-menu{color:var(--fg-tertiary)}.theme-dark .pbar-menu:hover{color:var(--fg-primary)}