*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--primary: #9FA8DA;--primary-dark: #7986CB;--on-primary: #000000;--background: #121212;--surface: #1E1E1E;--surface-raised: #272727;--on-surface: rgba(255, 255, 255, .87);--text-secondary: rgba(255, 255, 255, .6);--divider: rgba(255, 255, 255, .12);--shadow-1: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .6);--shadow-2: 0 3px 6px rgba(0, 0, 0, .6), 0 2px 4px rgba(0, 0, 0, .5);--radius: 4px}body{font-family:Roboto,sans-serif;background:var(--background);color:var(--on-surface);line-height:1.6;height:100dvh;display:flex;flex-direction:column}.container{max-width:960px;margin:0 auto;padding:0 24px}.header{background:var(--surface);color:var(--on-surface);position:sticky;top:0;z-index:100;box-shadow:var(--shadow-2)}.header__inner{display:flex;align-items:center;justify-content:space-between;height:64px}.header__logo{font-size:1.25rem;font-weight:500;color:var(--on-surface);text-decoration:none;letter-spacing:.0125em}.header__nav{display:flex;gap:4px}.nav-link{color:var(--text-secondary);text-decoration:none;font-size:.875rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:8px 16px;border-radius:var(--radius);transition:color .15s ease,background .15s ease}.nav-link:hover{color:var(--on-surface);background:#ffffff14}.nav-link.active{color:var(--primary)}main{flex:1;width:100%;display:flex;flex-direction:column;min-height:0}.hero{padding:80px 0 96px}.profile{display:flex;align-items:center;gap:64px}.profile__image-placeholder{width:200px;height:200px;min-width:200px;border-radius:50%;background:var(--divider);display:flex;align-items:center;justify-content:center;overflow:hidden}.profile__image-placeholder img,.profile__image-placeholder svg{width:110px;height:110px}.profile__name{font-size:2.125rem;font-weight:400;letter-spacing:.0073em;margin-bottom:16px;color:var(--on-surface)}.profile__bio{font-size:1rem;color:var(--text-secondary);line-height:1.75}.page-hero{padding:56px 0 48px;border-bottom:1px solid var(--divider)}.page-hero h1{font-size:2.125rem;font-weight:400;letter-spacing:.0073em;margin-bottom:8px}.page-hero p{color:var(--text-secondary);font-size:1rem}.empty-state{padding:80px 0;text-align:center;color:var(--text-secondary)}.empty-state__icon{width:64px;height:64px;fill:var(--divider);margin:0 auto 24px;display:block}.empty-state h2{font-size:1.25rem;font-weight:500;color:var(--on-surface);margin-bottom:8px}.empty-state p{font-size:.9375rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;padding:48px 0}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:24px;text-decoration:none;color:var(--on-surface);display:block;transition:box-shadow .2s ease,transform .2s ease}.card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}.card__title{font-size:1.125rem;font-weight:500;margin-bottom:8px;color:var(--primary)}.card__description{font-size:.875rem;color:var(--text-secondary);line-height:1.6}.experiment-list{list-style:none;padding:40px 0;display:flex;flex-direction:column;gap:4px}.experiment-list a{display:flex;align-items:center;gap:20px;padding:16px 20px;background:var(--surface);border-radius:var(--radius);text-decoration:none;color:var(--on-surface);transition:background .15s ease}.experiment-list a:hover{background:var(--surface-raised)}.experiment-list__number{font-size:.75rem;font-weight:500;color:var(--text-secondary);font-variant-numeric:tabular-nums;min-width:28px}.experiment-list__info{display:flex;flex-direction:column;gap:2px}.experiment-list__title{font-size:.9375rem}.experiment-list__description{font-size:.8125rem;color:var(--text-secondary)}.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary);text-decoration:none;font-size:.875rem;margin-bottom:24px;transition:color .15s ease}.back-link:hover{color:var(--on-surface)}.canvas-section{flex:1;display:flex;align-items:center;padding:40px 0;min-height:0}.canvas-wrap{width:100%;max-width:1800px;overflow:hidden}.canvas-wrap>div{width:100%;height:100%}.canvas-wrap svg{display:block;width:100%;height:100%}.canvas-section.sketch-layout{flex-direction:row;align-items:stretch;padding:0;width:100%}.sketch-layout .canvas-wrap{flex:1;width:auto;max-width:none;min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:25px 0}.sketch-layout .canvas-wrap>div{height:100%;width:auto;max-width:100%;aspect-ratio:1 / 1}.controls-panel{width:260px;flex-shrink:0;padding:24px;background:var(--surface);border-left:1px solid var(--divider);display:flex;flex-direction:column;gap:20px;overflow-y:auto}.control{display:flex;flex-direction:column;gap:8px}.control__header{display:flex;justify-content:space-between;align-items:baseline}.control__label{font-size:.75rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em}.control__value{font-size:.8125rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}.control__slider{width:100%;accent-color:var(--primary);cursor:pointer}.btn{padding:10px 16px;background:transparent;color:var(--primary);border:1px solid rgba(159,168,218,.4);border-radius:var(--radius);font-family:inherit;font-size:.875rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;width:100%;transition:background .15s ease,border-color .15s ease}.btn:hover{background:#9fa8da14;border-color:var(--primary)}.controls-toggle{display:none;position:fixed;bottom:24px;right:24px;z-index:150;width:48px;height:48px;border-radius:50%;background:var(--surface);border:1px solid var(--divider);color:var(--primary);cursor:pointer;align-items:center;justify-content:center;box-shadow:var(--shadow-2)}.controls-close{display:none;align-self:flex-end;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:4px}.controls-close:hover{color:var(--on-surface)}.controls-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:199;background:#0006}.controls-backdrop.open{display:block}@media(max-height:500px){.header__inner{height:44px}}@media(max-width:640px){.profile{flex-direction:column;text-align:center;gap:32px}.profile__name{font-size:1.75rem}.hero{padding:48px 0 64px}.controls-toggle{display:flex}.sketch-layout .canvas-wrap>div{width:100%;height:auto}.controls-close{display:flex}.controls-panel{position:fixed;top:0;right:0;bottom:0;transform:translate(100%);transition:transform .25s ease;z-index:200}.controls-panel.open{transform:translate(0)}}