:root,:root[data-theme=light]{--color-primary: #008080;--color-primary-strong: #006666;--color-primary-soft: #99cccc;--color-primary-contrast: #ffffff;--color-surface: #c0c0c0;--color-surface-alt: #d4d0c8;--color-surface-sunken: #b0aca4;--color-text: #000000;--color-text-muted: #3a3a3a;--color-success: #16a34a;--color-warning: #d97706;--color-danger: #dc2626;--color-neutral: #808080;--bevel-light: #ffffff;--bevel-dark: #808080;--bevel-shadow: #000000;--title-bar-text: #ffffff;--link: #0000a0;--grain-opacity: .07;--scanline-opacity: .05}:root[data-theme=dark]{--color-primary: #14b8a6;--color-primary-strong: #0d9488;--color-primary-soft: #0f3d3a;--color-primary-contrast: #04100f;--color-surface: #16202a;--color-surface-alt: #1f2c38;--color-surface-sunken: #0f1720;--color-text: #dce8e8;--color-text-muted: #8fa6a6;--color-success: #34d399;--color-warning: #fbbf24;--color-danger: #f87171;--color-neutral: #3f5162;--bevel-light: #33465a;--bevel-dark: #070d13;--bevel-shadow: #000000;--title-bar-text: #dce8e8;--link: #7dd3fc;--grain-opacity: .09;--scanline-opacity: .06}:root{--font-display: "Silkscreen", "Courier New", monospace;--font-body: "JetBrains Mono", "Consolas", monospace;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--space-12: 48px;--radius-sm: 4px;--radius-md: 8px;--border-bevel: 2px solid;--shadow-panel: 2px 2px 0 rgba(0, 0, 0, .35)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--color-text);background-color:var(--color-surface);background-image:linear-gradient(45deg,rgba(0,0,0,.04) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.04) 75%),linear-gradient(45deg,rgba(0,0,0,.04) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.04) 75%);background-size:4px 4px;background-position:0 0,2px 2px;min-height:100vh}body:before,body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999}body:before{opacity:var(--grain-opacity);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}body:after{opacity:var(--scanline-opacity);background-image:repeating-linear-gradient(to bottom,rgba(0,0,0,.6) 0,rgba(0,0,0,.6) 1px,transparent 1px,transparent 3px)}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.25;letter-spacing:.02em}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.125rem}p{max-width:70ch}a{color:var(--link)}:focus-visible{outline:2px dotted var(--color-text);outline-offset:2px}.app{display:flex;flex-direction:column;min-height:100vh;position:relative;z-index:1}.container{width:100%;max-width:1120px;margin:0 auto;padding:0 var(--space-4)}.section{padding:var(--space-8) 0}.section--tight{padding:var(--space-6) 0}.section__head{margin-bottom:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}.eyebrow{font-family:var(--font-display);font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:var(--color-primary-strong)}.muted{color:var(--color-text-muted)}.center{text-align:center}.center p{margin-inline:auto}.navbar{position:sticky;top:0;z-index:50;background:var(--color-surface-alt);border-bottom:2px solid;border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light)}.navbar__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-2) 0}.navbar__brand{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-size:1rem;color:var(--color-text);text-decoration:none}.navbar__brand-badge{display:inline-grid;place-items:center;width:38px;height:38px;padding:2px;background:#e9e5dd;border:2px solid;border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light)}.navbar__logo{width:100%;height:100%;display:block;object-fit:contain}.navbar__links{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;list-style:none}.nav-link{font-family:var(--font-display);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:var(--color-text);padding:var(--space-2) var(--space-3);border:2px solid transparent}.nav-link:hover{background:var(--color-surface);border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light)}.nav-link--active{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-display);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;padding:var(--space-3) var(--space-4);color:var(--color-text);background:var(--color-surface-alt);border:2px solid;border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;transition:background .1s ease}.btn:hover{background:var(--color-surface)}.btn:active{border-color:var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark)}.btn:disabled{color:var(--color-neutral);cursor:not-allowed}.btn--primary{background:var(--color-primary);color:var(--color-primary-contrast)}.btn--primary:hover{background:var(--color-primary-strong)}.btn--sm{padding:var(--space-1) var(--space-2);font-size:.62rem}.btn--icon{width:40px;height:40px;padding:0;font-size:1rem}.panel{background:var(--color-surface);border:2px solid;border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);box-shadow:var(--shadow-panel)}.panel__title{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-primary);color:var(--title-bar-text);font-family:var(--font-display);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.panel__title-dots{letter-spacing:2px;opacity:.85}.panel__body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}.panel__body--flush{padding:0;gap:0}.panel__controls{display:flex;flex-wrap:wrap;gap:var(--space-2)}.field{display:flex;flex-direction:column;gap:var(--space-1)}.field__label{font-family:var(--font-display);font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted)}.input,.select{font-family:var(--font-body);font-size:.85rem;color:var(--color-text);background:var(--color-surface-alt);border:2px solid;border-color:var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);width:100%}.input::placeholder{color:var(--color-neutral)}.input:focus-visible,.select:focus-visible{outline:2px dotted var(--color-text);outline-offset:1px}.hint{font-size:.72rem;color:var(--color-text-muted)}.hint--error{color:var(--color-danger)}.hint--ok{color:var(--color-success)}.workbench{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:start}.intro{padding:var(--space-8) 0;border-bottom:2px solid var(--bevel-dark)}.intro__panel{background:var(--color-surface);border:2px solid;border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}.intro__title{font-size:clamp(1.25rem,2.4vw,1.75rem)}.intro__title span{color:var(--color-primary-strong)}.intro__text{color:var(--color-text-muted);font-size:.88rem}.intro__actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-1)}.marquee{margin-top:var(--space-2);padding:var(--space-3);background:var(--color-surface-sunken);border:2px solid;border-color:var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);font-family:var(--font-display);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-4)}.marquee li{display:inline-flex;align-items:center;gap:var(--space-1);white-space:nowrap}.icon{display:inline-block;vertical-align:-.125em;flex-shrink:0}.workbench{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:start}.camera-container{position:relative;width:100%;aspect-ratio:4 / 3;background:#000;border:2px solid;border-color:var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);overflow:hidden}.camera-container video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-container canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.camera-placeholder{position:absolute;inset:0;display:grid;place-items:center;gap:var(--space-3);padding:var(--space-6);text-align:center;color:#dce8e8;background:#000000b8}.camera-placeholder p{margin:0 auto}.gesture-display{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-surface-sunken);border:2px solid;border-color:var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);min-height:64px}.gesture-icon{display:grid;place-items:center;width:46px;color:var(--color-primary-strong)}.gesture-icon--idle{color:var(--color-neutral)}.gesture-info{flex:1}.gesture-info .label{font-family:var(--font-display);font-size:.95rem}.gesture-info .confidence{font-size:.74rem;color:var(--color-text-muted);margin-top:2px}.confidence-track{width:100%;height:8px;background:var(--color-surface-alt);border:1px solid var(--bevel-dark);margin-top:var(--space-2);overflow:hidden}.confidence-fill{height:100%;background:var(--color-primary);transition:width .12s linear}.youtube-container{width:100%;aspect-ratio:16 / 9;background:#000;border:2px solid;border-color:var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);overflow:hidden}.youtube-container iframe,.youtube-mount,.youtube-mount iframe{width:100%;height:100%;display:block;border:none}.meta-row{display:flex;justify-content:space-between;gap:var(--space-2);font-size:.72rem;color:var(--color-text-muted);font-family:var(--font-display)}.gesture-map{width:100%;border-collapse:collapse;background:var(--color-surface-alt)}.gesture-map th,.gesture-map td{padding:var(--space-2) var(--space-3);text-align:left;border-bottom:1px solid var(--bevel-dark);font-size:.78rem}.gesture-map th{font-family:var(--font-display);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;background:var(--color-surface-sunken)}.gesture-map .gesture-icon{width:40px;color:var(--color-primary-strong)}.playlist__form{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--space-2);align-items:end}.playlist__list{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);max-height:320px;overflow-y:auto}.playlist__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2);background:var(--color-surface-alt);border:2px solid;border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light)}.playlist__item--current{background:var(--color-primary-soft)}.playlist__thumb{width:72px;height:40px;object-fit:cover;border:1px solid var(--bevel-dark);flex-shrink:0}.playlist__info{flex:1;min-width:0}.playlist__name{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist__id{font-size:.68rem;color:var(--color-text-muted)}.playlist__actions{display:flex;gap:var(--space-1)}.empty-state{padding:var(--space-6);text-align:center;color:var(--color-text-muted);border:2px dashed var(--bevel-dark);font-size:.8rem}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.card{background:var(--color-surface);border:2px solid;border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}.card__icon{font-size:1.6rem;width:44px;height:44px;display:grid;place-items:center;background:var(--color-primary-soft);border:2px solid;border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light)}.card h3{font-size:.9rem}.card p{font-size:.8rem;color:var(--color-text-muted)}.card--tech{background:var(--color-surface-alt)}.card--tech h3{padding-bottom:var(--space-1);border-bottom:2px solid var(--color-primary-soft)}.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);counter-reset:step}.step{background:var(--color-surface-alt);border:2px solid;border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}.step__num{font-family:var(--font-display);font-size:1.1rem;color:var(--color-primary-contrast);background:var(--color-primary);width:32px;height:32px;display:grid;place-items:center;border:2px solid;border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light)}.step h3{font-size:.85rem}.step p{font-size:.78rem;color:var(--color-text-muted)}.faq{display:flex;flex-direction:column;gap:var(--space-2)}.faq__item{background:var(--color-surface-alt);border:2px solid;border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light)}.faq__item summary{cursor:pointer;padding:var(--space-3);font-family:var(--font-display);font-size:.76rem;list-style:none}.faq__item summary::-webkit-details-marker{display:none}.faq__item summary:before{content:"+ ";color:var(--color-primary-strong)}.faq__item[open] summary:before{content:"- "}.faq__item p{padding:0 var(--space-3) var(--space-3);font-size:.8rem;color:var(--color-text-muted)}.banner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-4);background:var(--color-surface-alt);border:2px solid;border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);box-shadow:var(--shadow-panel)}.banner h3{display:inline-flex;align-items:center;gap:var(--space-2);font-size:.95rem;margin-bottom:var(--space-1)}.banner p{font-size:.8rem;color:var(--color-text-muted)}.banner-badge{display:inline-block;margin-top:var(--space-2);padding:2px var(--space-2);font-family:var(--font-display);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-primary-contrast);background:var(--color-success)}.footer{margin-top:auto;padding:var(--space-6) 0;background:var(--color-surface-alt);border-top:2px solid;border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);font-size:.76rem;color:var(--color-text-muted)}.footer__inner{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}.footer__links{display:flex;gap:var(--space-4);list-style:none;flex-wrap:wrap}.footer a{color:var(--color-text-muted)}.footer a:hover{color:var(--color-text)}.about-hero{display:grid;grid-template-columns:240px 1fr;gap:var(--space-6);align-items:start}.about-photo{position:relative;width:100%;max-width:260px;margin:0 auto var(--space-4)}.about-photo__frame{position:relative;aspect-ratio:1;width:100%;overflow:hidden;background:var(--color-surface-sunken);border:2px solid;border-color:var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);box-shadow:5px 5px #00000047}.about-photo__img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 25%}.about-photo__fallback{width:100%;height:100%;display:grid;place-content:center;justify-items:center;gap:var(--space-2);padding:var(--space-4);text-align:center;color:var(--color-text-muted);font-size:.72rem}.about-photo__icon{color:var(--color-primary-strong)}.about-photo__label{position:absolute;right:-10px;bottom:-12px;transform:rotate(-4deg);padding:var(--space-1) var(--space-3);background:#e8877a;color:#fff;border:2px solid #2a2622;box-shadow:3px 3px #2a262259;font-family:var(--font-display);font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.about-hero h1{font-size:1.7rem}.about-role{font-family:var(--font-display);font-size:.8rem;color:var(--color-primary-strong);margin-bottom:var(--space-3)}.about-bio{display:flex;flex-direction:column;gap:var(--space-3)}.tag-list{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none}.tag{font-size:.72rem;padding:2px var(--space-2);background:var(--color-surface-alt);border:2px solid;border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light)}.timeline{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}.timeline__item{display:grid;grid-template-columns:84px 1fr;gap:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--bevel-dark)}.timeline__item:last-child{border-bottom:none;padding-bottom:0}.timeline__when{font-family:var(--font-display);font-size:1.15rem;color:var(--color-primary-strong)}.timeline__what h3{font-size:.9rem}.timeline__what p{font-size:.8rem;color:var(--color-text-muted)}.contact-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2)}.action-feedback{position:fixed;left:50%;bottom:var(--space-6);display:inline-flex;align-items:center;gap:var(--space-2);transform:translate(-50%) translateY(8px);padding:var(--space-2) var(--space-4);background:var(--color-primary);color:var(--color-primary-contrast);font-family:var(--font-display);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;border:2px solid;border-color:var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:200}.action-feedback--visible{opacity:1;transform:translate(-50%) translateY(0)}.error-banner{margin:var(--space-3) auto 0;padding:var(--space-2) var(--space-3);background:var(--color-surface-alt);border:2px solid var(--color-danger);color:var(--color-danger);font-size:.78rem;word-break:break-word}.status{display:flex;align-items:center;gap:var(--space-2);font-size:.72rem;color:var(--color-text-muted)}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--color-neutral);border:1px solid var(--bevel-dark)}.status-dot--ready{background:var(--color-success)}.status-dot--loading{background:var(--color-warning);animation:blink 1s steps(2,start) infinite}.status-dot--error{background:var(--color-danger)}@keyframes blink{0%,to{opacity:1}50%{opacity:.25}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:900px){.workbench{grid-template-columns:1fr}.grid-3,.steps{grid-template-columns:repeat(2,1fr)}.about-hero,.playlist__form{grid-template-columns:1fr}}@media(max-width:560px){h1{font-size:1.5rem}.grid-3,.grid-2,.steps{grid-template-columns:1fr}.timeline__item{grid-template-columns:1fr;gap:var(--space-1)}.navbar__inner{justify-content:center}.intro{padding:var(--space-6) 0}.banner{flex-direction:column;text-align:center}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}