:root{--font-display: "EB Garamond", Georgia, serif;--font-body: "Inter", -apple-system, sans-serif;--radius: 14px;--radius-sm: 10px;--radius-xs: 6px;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .15s;--duration-base: .25s;--duration-slow: .4s;--duration-enter: .5s;--sidebar-width: 280px;--layout-transition: .55s var(--ease-out)}[data-theme=dark]{--bg-primary: #0A0A0B;--bg-secondary: #111113;--bg-tertiary: #1A1A1E;--bg-hover: rgba(255,255,255,.04);--bg-active: rgba(255,255,255,.07);--border: rgba(255,255,255,.08);--border-strong: rgba(255,255,255,.14);--text-primary: #F0F0F2;--text-secondary: #8B8B97;--text-tertiary: #5C5C68;--accent-subtle: rgba(232,232,236,.08);--dot: rgba(255,255,255,.04);--shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.05);--shadow-focus: 0 0 0 2px var(--bg-primary), 0 0 0 4px rgba(255,255,255,.25);--gradient-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");--riot-accent: #FF4655;--showcase-bg: #111113;--tag-bg: rgba(255,255,255,.06);--tag-text: #9898A4;--proximity-glow: rgba(255,255,255,.015);--switch-bg: #2A2A30;--switch-bg-active: #F0F0F2;--switch-knob: #888;--switch-knob-active: #0A0A0B;--pop-surface: #1A1A1E;--pop-surface-hover: #222228;--pop-surface-selected: #222228;--pop-text: #F0F0F2;--pop-text-secondary: #8B8B97;--pop-text-tertiary: #5C5C68;--pop-border: rgba(255,255,255,.08);--pop-border-selected: rgba(255,255,255,.12);--pop-input-ring: rgba(255,255,255,.15);--pop-input-outer: rgba(255,255,255,.06);--pop-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.1);--pop-icon-bg: #2A2A30;--pop-tree-line: rgba(255,255,255,.08)}[data-theme=light]{--bg-primary: #FAFAF9;--bg-secondary: #F3F3F1;--bg-tertiary: #EAEAE7;--bg-hover: rgba(0,0,0,.025);--bg-active: rgba(0,0,0,.05);--border: rgba(0,0,0,.08);--border-strong: rgba(0,0,0,.14);--text-primary: #111111;--text-secondary: #6B6B76;--text-tertiary: #9898A4;--accent-subtle: rgba(26,26,30,.06);--dot: rgba(0,0,0,.035);--shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.06);--shadow-focus: 0 0 0 2px var(--bg-primary), 0 0 0 4px rgba(0,0,0,.15);--gradient-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");--riot-accent: #E53E4D;--showcase-bg: #F3F3F1;--tag-bg: rgba(0,0,0,.05);--tag-text: #6B6B76;--proximity-glow: rgba(0,0,0,.012);--switch-bg: #D8D8DC;--switch-bg-active: #111111;--switch-knob: #FFF;--switch-knob-active: #FFF;--pop-surface: #FFFFFF;--pop-surface-hover: #F8F8F8;--pop-surface-selected: #F8F8F8;--pop-text: #1A1A1A;--pop-text-secondary: #666666;--pop-text-tertiary: #999999;--pop-border: #F0F0F0;--pop-border-selected: #F0F0F0;--pop-input-ring: #C4C4C5;--pop-input-outer: #E9EAEA;--pop-shadow: 0px 0px 0px .5px rgba(0,0,0,.15), 0px 2px 4px rgba(0,0,0,.02), 0px 10px 20px rgba(0,0,0,.02), 0px 10px 15px rgba(0,0,0,.05);--pop-icon-bg: #F8F8F8;--pop-tree-line: #F0F0F0}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{font-family:var(--font-body);background:linear-gradient(180deg,#1a1a1e 0%,var(--bg-primary) 60%);color:var(--text-primary);min-height:100vh;overflow-x:hidden;transition:background var(--duration-slow) var(--ease-out),color var(--duration-slow) var(--ease-out)}[data-theme=light] body{background:linear-gradient(180deg,#ededea 0%,var(--bg-primary) 60%)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:var(--gradient-noise);background-size:256px 256px;pointer-events:none;z-index:9999}a{color:inherit;text-decoration:none}button{font-family:inherit}::selection{background:var(--accent-subtle);color:var(--text-primary)}.layout-toggle{position:fixed;top:16px;right:16px;z-index:200;width:40px;height:40px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-secondary);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:color var(--duration-fast) ease,border-color var(--duration-fast) ease}.layout-toggle:hover{color:var(--text-primary);border-color:var(--border-strong)}.layout-toggle:active{transform:scale(.94);transition:transform .08s ease}.layout-toggle .icon-top,.layout-toggle .icon-side{transition:opacity .2s ease;position:absolute}[data-layout=top] .layout-toggle .icon-side{opacity:1}[data-layout=top] .layout-toggle .icon-top,[data-layout=sidebar] .layout-toggle .icon-side{opacity:0}[data-layout=sidebar] .layout-toggle .icon-top{opacity:1}.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:var(--bg-secondary);border-right:1px solid var(--border);padding:32px 24px;display:flex;flex-direction:column;gap:24px;z-index:50;transform:translate(-100%);opacity:0;transition:transform var(--layout-transition),opacity var(--layout-transition);overflow-y:auto}[data-layout=sidebar] .sidebar{transform:translate(0);opacity:1}.sidebar-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid var(--border)}.sidebar-avatar img{width:100%;height:100%;object-fit:cover;display:block}.sidebar-name{font-family:var(--font-display);font-size:22px;font-weight:400;letter-spacing:-.02em;line-height:1.2}.sidebar-role{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:450;color:var(--text-secondary)}.sidebar-riot-logo{width:18px;height:18px;border-radius:4px;overflow:hidden;display:inline-flex;flex-shrink:0}.sidebar-riot-logo img{width:100%;height:100%;object-fit:cover;display:none}[data-theme=dark] .sidebar-riot-logo .riot-logo-dark,[data-theme=light] .sidebar-riot-logo .riot-logo-light{display:block!important}.sidebar-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 6px;background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;font-size:11.5px;font-weight:500;color:var(--text-secondary)}.sidebar-badge-dot{width:6px;height:6px;background:#34c759;border-radius:50%}.sidebar-nav{display:flex;flex-direction:column;gap:2px;margin-top:8px}.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13.5px;font-weight:500;color:var(--text-secondary);border-radius:var(--radius-sm);transition:color var(--duration-fast) ease,background var(--duration-fast) ease}.sidebar-nav a:hover{color:var(--text-primary);background:var(--bg-hover)}.sidebar-nav a svg{width:16px;height:16px;opacity:.5}.sidebar-socials{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:16px;border-top:1px solid var(--border)}.sidebar-social{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:12.5px;color:var(--text-tertiary);border-radius:var(--radius-xs);transition:color var(--duration-fast) ease}.sidebar-social:hover{color:var(--text-primary)}.sidebar-social svg{width:14px;height:14px;opacity:.5}.sidebar-time{font-size:11px;color:var(--text-tertiary);font-variant-numeric:tabular-nums;padding:4px 8px}.sidebar-theme-toggle{background:none;border:none;padding:4px;cursor:pointer;color:var(--text-tertiary);display:flex;align-items:center;justify-content:center;transition:color .2s;margin-top:auto}.sidebar-theme-toggle:hover{color:var(--text-primary)}.sidebar-theme-toggle svg{width:15px;height:15px}.sidebar-theme-toggle .icon-moon,[data-theme=dark] .sidebar-theme-toggle .icon-sun{display:none}[data-theme=dark] .sidebar-theme-toggle .icon-moon{display:block}.main{transition:margin-left var(--layout-transition),max-width var(--layout-transition)}[data-layout=sidebar] .main{margin-left:var(--sidebar-width)}.nav{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:100;display:flex;align-items:center;gap:4px;padding:4px 5px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:100px;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);transition:opacity var(--layout-transition),transform var(--layout-transition)}[data-layout=sidebar] .nav{opacity:0;transform:translate(-50%) translateY(-20px);pointer-events:none}.nav-avatar{width:0;height:26px;border-radius:50%;overflow:hidden;opacity:0;transform:scale(.5);transition:width .35s var(--ease-spring),opacity .3s var(--ease-out),transform .35s var(--ease-spring),margin .35s var(--ease-out);flex-shrink:0;margin:0}.nav-avatar.visible{width:26px;opacity:1;transform:scale(1);margin-left:4px}.nav-avatar img{width:100%;height:100%;object-fit:cover;display:block}.nav-links{display:flex;gap:1px;list-style:none}.nav-links a{display:block;padding:6px 14px;font-size:13px;font-weight:450;color:var(--text-secondary);border-radius:100px;transition:color var(--duration-fast) ease;position:relative}.nav-links a:hover{color:var(--text-primary)}.theme-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:50%;transition:color var(--duration-fast) ease;margin-left:2px}.theme-toggle:hover{color:var(--text-primary)}.theme-toggle svg{width:15px;height:15px}.sun-icon,.moon-icon{display:none}[data-theme=dark] .sun-icon,[data-theme=light] .moon-icon{display:block}.hero{padding:160px 0 80px;transition:opacity var(--layout-transition),transform var(--layout-transition)}[data-layout=sidebar] .hero{opacity:0;transform:translateY(-20px);height:0;padding:0;overflow:hidden;pointer-events:none}.container{max-width:720px;margin:0 auto;padding:0 24px}.hero-avatar-row{display:flex;align-items:center;gap:16px;margin-bottom:12px}.hero-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;border:2px solid var(--border);flex-shrink:0}.hero-avatar img{width:100%;height:100%;object-fit:cover;display:block}.hero-avatar-name{font-size:15px;font-weight:550;letter-spacing:-.015em}.hero-avatar-role{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:450;color:var(--text-secondary)}.riot-logo-inline{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;flex-shrink:0;overflow:hidden}.riot-logo-inline img{width:100%;height:100%;object-fit:cover;display:none}[data-theme=dark] .riot-logo-light,[data-theme=light] .riot-logo-dark{display:block!important}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 6px 5px 7px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;font-size:12.5px;font-weight:500;color:var(--text-secondary);margin-bottom:8px}.hero-badge-dot{width:7px;height:7px;background:#34c759;border-radius:50%;position:relative}.hero-badge-dot:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;background:#34c75940;animation:ping 2.5s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{0%{transform:scale(1);opacity:.6}75%,to{transform:scale(1.8);opacity:0}}.hero-name{font-family:var(--font-display);font-size:clamp(48px,7.5vw,68px);font-weight:400;line-height:1.05;letter-spacing:-.02em;margin-bottom:24px}.hero-name em{font-style:italic;color:var(--text-secondary)}.hero-description{font-size:17px;line-height:1.65;color:var(--text-secondary);max-width:520px}.hero-description strong{color:var(--text-primary);font-weight:500}.hero-description .riot-link{color:var(--text-primary);font-weight:500;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--duration-base) ease}.hero-description .riot-link:hover{color:var(--text-secondary);text-decoration-color:var(--text-secondary)}.social-row{display:flex;gap:8px;margin-top:32px;flex-wrap:wrap}.social-link{display:inline-flex;align-items:center;gap:7px;padding:8px 6px;background:transparent;border:1px solid var(--border);border-radius:6px;font-size:13px;font-weight:450;color:var(--text-secondary);transition:color var(--duration-fast) ease,border-color var(--duration-fast) ease,transform var(--duration-base) var(--ease-spring)}.social-link:hover{color:var(--text-primary);border-color:var(--border-strong)}.social-link:active{transform:scale(.96)}.social-link svg{width:15px;height:15px;opacity:.6}.section{padding:64px 0}.section-content{opacity:0;transform:translateY(24px);transition:opacity var(--duration-enter) var(--ease-out),transform var(--duration-enter) var(--ease-out)}.section-content.visible{opacity:1;transform:translateY(0)}.stagger-child{opacity:0;transform:translateY(12px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}.section-content.visible .stagger-child{opacity:1;transform:translateY(0)}.section-content.visible .stagger-1{transition-delay:0s}.section-content.visible .stagger-2{transition-delay:.06s}.section-content.visible .stagger-3{transition-delay:.12s}.section-content.visible .stagger-4{transition-delay:.18s}.section-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:24px}.section-title{font-family:var(--font-display);font-size:clamp(26px,4.2vw,34px);font-weight:400;line-height:1.2;letter-spacing:-.015em;margin-bottom:16px}.section-title em{font-style:normal;color:var(--text-secondary)}.section-subtitle{font-size:15px;color:var(--text-secondary);line-height:1.6;max-width:480px}.work-bento{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}.work-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:relative;cursor:default;transition:border-color var(--duration-base) ease,box-shadow var(--duration-base) ease,transform var(--duration-base) var(--ease-spring)}.work-card:hover{border-color:var(--border-strong);box-shadow:0 4px 24px var(--proximity-glow);transform:translateY(-2px)}.work-card.full{grid-column:1 / -1}.work-card-visual{width:100%;aspect-ratio:16 / 10;overflow:hidden;position:relative;background:var(--bg-tertiary)}.work-card.full .work-card-visual{aspect-ratio:21 / 8}.work-card-body{padding:20px 24px 24px}.work-card-title{font-size:15px;font-weight:600;margin-bottom:6px}.work-card-desc{font-size:13px;color:var(--text-secondary);line-height:1.55}.visual-ds{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:24px}.visual-ds-mock{width:200px;background:var(--pop-surface);border-radius:12px;box-shadow:var(--pop-shadow);padding:12px;display:flex;flex-direction:column;gap:8px;font-family:var(--font-body);transform:rotate(-2deg);animation:ds-float 4s var(--ease-out) infinite}@keyframes ds-float{0%,to{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-6px)}}.visual-ds-mock-header{display:flex;align-items:center;justify-content:space-between}.visual-ds-mock-title{font-size:9px;font-weight:500;color:var(--pop-text-secondary)}.visual-ds-mock-dots{display:flex;gap:2px}.visual-ds-mock-dots span{width:3px;height:3px;border-radius:50%;background:var(--pop-text-tertiary)}.visual-ds-mock-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:var(--pop-surface-hover)}.visual-ds-mock-item.active{background:var(--bg-active);border:1px solid var(--border)}.visual-ds-mock-icon{width:16px;height:16px;border-radius:4px;background:var(--text-primary);flex-shrink:0}.visual-ds-mock-text{flex:1;display:flex;flex-direction:column;gap:2px}.visual-ds-mock-name{width:60%;height:5px;border-radius:2px;background:var(--text-primary);opacity:.7}.visual-ds-mock-meta{width:40%;height:4px;border-radius:2px;background:var(--text-tertiary);opacity:.4}.visual-product{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:20px}.visual-product-mock{width:100%;display:flex;flex-direction:column;gap:8px}.visual-bar-row{display:flex;gap:6px;align-items:flex-end;height:48px}.visual-bar{flex:1;border-radius:4px 4px 0 0;transition:height .6s var(--ease-spring);height:0!important}.visual-bar:nth-child(1){background:var(--text-primary);opacity:.15}.visual-bar:nth-child(2){background:var(--text-primary);opacity:.25}.visual-bar:nth-child(3){background:var(--text-primary);opacity:.15}.visual-bar:nth-child(4){background:var(--text-primary);opacity:.4}.visual-bar:nth-child(5){background:var(--text-primary);opacity:.2}.visual-bar:nth-child(6){background:var(--text-primary);opacity:.15}.bars-animated .visual-bar:nth-child(1){height:60%!important;transition-delay:0s}.bars-animated .visual-bar:nth-child(2){height:80%!important;transition-delay:.06s}.bars-animated .visual-bar:nth-child(3){height:45%!important;transition-delay:.12s}.bars-animated .visual-bar:nth-child(4){height:95%!important;transition-delay:.18s}.bars-animated .visual-bar:nth-child(5){height:70%!important;transition-delay:.24s}.bars-animated .visual-bar:nth-child(6){height:55%!important;transition-delay:.3s}.visual-metric-row{display:flex;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}.bars-animated .visual-metric-row{opacity:1;transform:translateY(0);transition-delay:.4s}.visual-metric{flex:1;padding:8px;border-radius:6px;background:var(--bg-active)}.visual-metric-value{width:50%;height:6px;border-radius:3px;background:var(--text-primary);opacity:.5;margin-bottom:4px}.visual-metric-label{width:70%;height:4px;border-radius:2px;background:var(--text-tertiary);opacity:.3}.visual-ds-mock-item{opacity:0;transform:translate(-8px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-spring)}.ds-animated .visual-ds-mock-item{opacity:1;transform:translate(0)}.ds-animated .visual-ds-mock-item:nth-child(1){transition-delay:.1s}.ds-animated .visual-ds-mock-item:nth-child(2){transition-delay:.2s}.ds-animated .visual-ds-mock-item:nth-child(3){transition-delay:.3s}.visual-proto{width:100%;height:100%;display:flex;align-items:center;gap:0;padding:16px}.proto-left{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}.proto-arrow{flex-shrink:0;width:48px;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);opacity:.4}.proto-right{flex:1;min-width:0}.proto-prompt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px}.proto-prompt-icon{width:24px;height:24px;border-radius:6px;background:var(--accent-subtle);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-secondary)}.proto-prompt-text{padding-top:3px}.typewriter{font-family:var(--font-body);font-size:12px;font-weight:500;color:var(--text-secondary);line-height:1.4}.typewriter-cursor{font-size:12px;font-weight:300;color:var(--text-secondary);animation:blink-cursor .8s step-end infinite;margin-left:-1px}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.proto-code{border-radius:8px;overflow:hidden;background:var(--bg-primary);border:1px solid var(--border);opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-spring)}.proto-code.show{opacity:1;transform:translateY(0)}.proto-code-body{padding:8px 10px;display:flex;flex-direction:column;gap:2px}.pline{display:flex;gap:6px;align-items:center;padding:1px 3px;border-radius:3px;opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}.pline.show{opacity:1;transform:translateY(0)}.pline.hl{background:#82aaff0f;border-left:2px solid rgba(130,170,255,.3);padding-left:1px}[data-theme=light] .pline.hl{background:#2563eb0d;border-left-color:#2563eb40}.pnum{width:14px;text-align:right;font-family:SF Mono,monospace;font-size:8px;color:var(--text-tertiary);opacity:.35;flex-shrink:0}.pc{display:flex;gap:4px;align-items:center}.pc.pl{padding-left:12px}.pc.pl2{padding-left:24px}.proto-block{height:5px;border-radius:2px}.code-keyword{background:#c792ea;opacity:.6}.code-function{background:#82aaff;opacity:.6}.code-string{background:#c3e88d;opacity:.5}.code-punct{background:var(--text-secondary);opacity:.3}[data-theme=light] .code-keyword{background:#7c3aed;opacity:.5}[data-theme=light] .code-function{background:#2563eb;opacity:.5}[data-theme=light] .code-string{background:#059669;opacity:.4}.proto-preview-label{font-size:10px;font-weight:500;color:var(--text-tertiary);margin-bottom:8px;letter-spacing:.03em;text-transform:uppercase;opacity:0;transition:opacity .3s var(--ease-out)}.proto-preview-label.show{opacity:1}#protoArrow{opacity:0;transform:translate(-8px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-spring)}#protoArrow.show{opacity:1;transform:translate(0)}@keyframes arrow-pulse{0%,to{transform:translate(0)}50%{transform:translate(4px)}}#protoArrow.pulse svg{animation:arrow-pulse .6s var(--ease-out) 2}.proto-component{border-radius:10px;overflow:hidden;background:var(--pop-surface);border:1px solid var(--border);box-shadow:var(--shadow-card);display:flex;flex-direction:column;opacity:0;transform:translateY(12px) scale(.97);transition:opacity .4s var(--ease-out),transform .5s var(--ease-spring)}.proto-component.show{opacity:1;transform:translateY(0) scale(1)}.proto-notif{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);font-family:var(--font-body);opacity:0;transform:translate(12px);transition:opacity .3s var(--ease-out),transform .35s var(--ease-spring),background var(--duration-fast) ease}.proto-notif.show{opacity:1;transform:translate(0)}.proto-notif:last-child{border-bottom:none}.proto-notif:hover{background:var(--pop-surface-hover)}.proto-notif-icon{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.proto-notif-icon.warning{background:#ffb3401f;color:#ffb340}.proto-notif-icon.success{background:#34c7591f;color:#34c759}.proto-notif-icon.info{background:#3b82f61f;color:#60a5fa}.proto-notif-text{flex:1;min-width:0}.proto-notif-title{font-size:11.5px;font-weight:550;color:var(--pop-text);line-height:1.3}.proto-notif-desc{font-size:10px;color:var(--pop-text-secondary);line-height:1.3;margin-top:1px}.proto-notif-time{font-size:9.5px;color:var(--pop-text-tertiary);flex-shrink:0}.footer{padding:48px 0;border-top:1px solid var(--border);margin-top:40px}.footer-inner{display:flex;justify-content:space-between;align-items:center}.footer-left{font-size:13px;color:var(--text-tertiary)}.footer-left span{font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--text-secondary)}.footer-right{display:flex;gap:16px;align-items:center}.footer-link{font-size:12.5px;color:var(--text-tertiary);transition:color var(--duration-fast) ease}.footer-link:hover{color:var(--text-primary)}.local-time{font-size:12px;color:var(--text-tertiary);font-variant-numeric:tabular-nums}.showcase-slider{margin-top:32px}.showcase-track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}.showcase-track::-webkit-scrollbar{display:none}.showcase-slide{flex:0 0 100%;scroll-snap-align:start;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden}.showcase-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 32px;min-height:320px}.showcase-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-top:1px solid var(--border)}.showcase-name{font-size:13.5px;font-weight:600;color:var(--text-primary)}.showcase-tags{display:flex;gap:6px}.showcase-tag{padding:3px 10px;border-radius:100px;font-size:11px;font-weight:500;background:var(--tag-bg);color:var(--tag-text)}.showcase-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}.showcase-dot{width:7px;height:7px;border-radius:50%;border:none;background:var(--text-tertiary);opacity:.25;cursor:pointer;padding:0;transition:opacity var(--duration-fast) ease,transform var(--duration-fast) var(--ease-spring)}.showcase-dot.active{opacity:.7;transform:scale(1.3)}.showcase-dot:hover{opacity:.5}.sc-popover{width:280px;background:var(--pop-surface);border:1px solid var(--pop-border);border-radius:12px;box-shadow:var(--pop-shadow);overflow:hidden;font-family:var(--font-body)}.sc-popover-tabs{display:flex;border-bottom:1px solid var(--pop-border);padding:0 4px}.sc-popover-tab{flex:1;padding:10px 0;font-size:11.5px;font-weight:550;font-family:inherit;color:var(--pop-text-tertiary);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color var(--duration-fast) ease;text-align:center}.sc-popover-tab.active{color:var(--pop-text);border-bottom-color:var(--text-primary)}.sc-popover-body{padding:8px}.sc-popover-search{display:flex;align-items:center;gap:8px;padding:7px 10px;margin-bottom:4px;border-radius:8px;border:1px solid var(--pop-border);font-size:11.5px;color:var(--pop-text-tertiary)}.sc-popover-search svg{opacity:.4;flex-shrink:0}.sc-popover-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;transition:background var(--duration-fast) ease;cursor:default}.sc-popover-item:hover{background:var(--pop-surface-hover)}.sc-popover-item.active{background:var(--pop-surface-selected);border:1px solid var(--pop-border-selected)}.sc-popover-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sc-popover-item-text{flex:1;display:flex;flex-direction:column;gap:1px}.sc-popover-item-name{font-size:12.5px;font-weight:550;color:var(--pop-text)}.sc-popover-item-meta{font-size:11px;color:var(--pop-text-tertiary)}.sc-popover-check{color:var(--text-primary);opacity:.5;flex-shrink:0}.sc-buttons-grid{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}.sc-btn-row{display:flex;gap:8px;justify-content:center}.sc-btn-sizes{display:flex;gap:8px;align-items:center;justify-content:center}.sc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 18px;border-radius:8px;font-size:12.5px;font-weight:550;font-family:inherit;border:none;cursor:default;transition:opacity var(--duration-fast) ease}.sc-btn svg{flex-shrink:0}.sc-btn-primary{background:var(--text-primary);color:var(--bg-primary)}.sc-btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border)}.sc-btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}.sc-btn-danger{background:#ff46551a;color:var(--riot-accent);border:1px solid rgba(255,70,85,.15)}.sc-btn-sm{padding:5px 14px;font-size:11.5px;border-radius:6px}.sc-btn-lg{padding:10px 22px;font-size:13.5px;border-radius:10px}.sc-btn-icon{gap:7px}.sc-switch-list{display:flex;flex-direction:column;gap:0;width:100%;max-width:340px;background:var(--pop-surface);border:1px solid var(--pop-border);border-radius:12px;overflow:hidden}.sc-switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid var(--pop-border)}.sc-switch-row:last-child{border-bottom:none}.sc-switch-row.disabled{opacity:.4}.sc-switch-label{flex:1;min-width:0}.sc-switch-title{display:block;font-size:12.5px;font-weight:550;color:var(--pop-text);line-height:1.3}.sc-switch-desc{display:block;font-size:11px;color:var(--pop-text-tertiary);line-height:1.3;margin-top:2px}.sc-switch{position:relative;display:inline-flex;flex-shrink:0;cursor:pointer}.sc-switch input{position:absolute;opacity:0;width:0;height:0}.sc-switch-track{width:36px;height:20px;border-radius:100px;background:var(--switch-bg);position:relative;transition:background var(--duration-fast) ease}.sc-switch-track:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--switch-knob);transition:transform var(--duration-base) var(--ease-spring),background var(--duration-fast) ease}.sc-switch input:checked+.sc-switch-track{background:var(--switch-bg-active)}.sc-switch input:checked+.sc-switch-track:after{transform:translate(16px);background:var(--switch-knob-active)}.sc-switch input:disabled+.sc-switch-track{cursor:not-allowed}.sc-badges-grid{display:flex;flex-direction:column;gap:16px;width:100%;max-width:360px}.sc-badges-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.sc-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;font-size:11.5px;font-weight:550;white-space:nowrap}.sc-badge-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.sc-badge-neutral{background:var(--bg-tertiary);color:var(--text-secondary)}.sc-badge-primary{background:#6366f11a;color:#6366f1}.sc-badge-success{background:#34c7591a;color:#34c759}.sc-badge-success .sc-badge-dot{background:#34c759}.sc-badge-warning{background:#ffb3401a;color:#ffb340}.sc-badge-warning .sc-badge-dot{background:#ffb340}.sc-badge-danger{background:#ff46551a;color:#ff4655}.sc-badge-danger .sc-badge-dot{background:#ff4655}.sc-badge-outline{background:transparent;color:var(--text-secondary);border:1px solid var(--border);padding:3px 11px}.sc-badge-combo{display:flex;flex-direction:column;gap:8px;padding-top:8px;border-top:1px solid var(--border)}.sc-badge-combo-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}@media(max-width:768px){.sidebar,.layout-toggle{display:none}[data-layout=sidebar] .main{margin-left:0}[data-layout=sidebar] .hero{opacity:1;transform:none;height:auto;padding:140px 0 60px;overflow:visible;pointer-events:auto}[data-layout=sidebar] .nav{opacity:1;transform:translate(-50%);pointer-events:auto}.work-bento{grid-template-columns:1fr}.work-card.full{grid-column:auto}.visual-proto{flex-direction:column;gap:12px}.proto-arrow{transform:rotate(90deg);width:auto;height:32px}.showcase-preview{padding:32px 20px;min-height:280px}.sc-popover{width:260px}.footer-inner{flex-direction:column;gap:16px;text-align:center}}.theme-transitioning,.theme-transitioning *,.theme-transitioning *:before,.theme-transitioning *:after{transition-duration:.45s!important;transition-timing-function:var(--ease-out)!important}