:root{--bg:#f6f7f4;--surface:#fff;--surface-2:#f0f2ee;--border:#e2e6df;--text:#17201c;--muted:#5f6b66;--accent:#0f766e;--accent-ink:#fff;--good:#15803d;--good-bg:#e8f6ec;--info-bg:#eef4ff;--info:#1e40af;--danger:#b91c1c;--danger-bg:#fdecec;--shadow:0 1px 2px #1018140d, 0 6px 20px #1018140f;--radius:16px;--tap:52px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0d1412;--surface:#151f1c;--surface-2:#1c2925;--border:#2a3934;--text:#ecf2ef;--muted:#9db0a9;--accent:#2dd4bf;--accent-ink:#062521;--good:#4ade80;--good-bg:#12301f;--info-bg:#15233f;--info:#a5c4ff;--danger:#fca5a5;--danger-bg:#3a1717;--shadow:0 1px 2px #0000004d, 0 8px 24px #00000059;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#0d1412;--surface:#151f1c;--surface-2:#1c2925;--border:#2a3934;--text:#ecf2ef;--muted:#9db0a9;--accent:#2dd4bf;--accent-ink:#062521;--good:#4ade80;--good-bg:#12301f;--info-bg:#15233f;--info:#a5c4ff;--danger:#fca5a5;--danger-bg:#3a1717;--shadow:0 1px 2px #0000004d, 0 8px 24px #00000059;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow-x:hidden}button{font:inherit;color:inherit}h1,h2,p{margin:0}:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}.app{flex-direction:column;min-height:100dvh;display:flex}.topbar{z-index:10;padding:10px max(16px,50% - 574px);padding-top:max(10px, env(safe-area-inset-top));background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.brand{cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;min-height:44px;padding:4px;display:flex}.brand-mark{background:var(--accent);width:36px;height:36px;color:var(--accent-ink);border-radius:10px;place-items:center;display:grid}.brand-name{letter-spacing:-.01em;font-size:18px;font-weight:800}.brand-name span{color:var(--accent)}.icon-btn{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:12px;place-items:center;width:44px;height:44px;display:grid}.main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:20px 16px 32px}.footer{padding:18px 16px calc(18px + env(safe-area-inset-bottom));text-align:center;color:var(--muted);border-top:1px solid var(--border);font-size:13px}.btn{cursor:pointer;border:1px solid #0000;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:0 20px;font-weight:700;transition:transform 60ms,filter .15s;display:inline-flex}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.6;cursor:default}.btn-primary{background:var(--accent);color:var(--accent-ink)}.btn-primary:hover:not(:disabled){filter:brightness(1.05)}.btn-secondary{background:var(--surface-2);border-color:var(--border)}.btn-ghost{border-color:var(--border);background:0 0}.btn-lg{border-radius:14px;min-height:56px;padding:0 28px;font-size:17px}.btn-sm{min-height:40px;padding:0 14px;font-size:14px}.hero{margin:4px 0 18px}.hero h1{letter-spacing:-.02em;font-size:clamp(26px,6vw,36px);line-height:1.15}.hero p{color:var(--muted);max-width:62ch;margin-top:8px}.search{margin-bottom:8px;display:block;position:relative}.search-icon{width:20px;height:20px;color:var(--muted);pointer-events:none;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.search input{width:100%;height:var(--tap);border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;box-shadow:var(--shadow);border-radius:14px;padding:0 16px 0 46px;font-size:16px}.search input::placeholder{color:var(--muted)}.search input:focus{outline:2px solid var(--accent);outline-offset:0}.group{margin-top:22px}.group-title{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 4px 10px;font-size:13px;font-weight:800}.cards{gap:10px;margin:0;padding:0;list-style:none;display:grid}@media (width>=640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=1000px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}.card{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;height:100%;min-height:72px;box-shadow:var(--shadow);cursor:pointer;align-items:center;gap:14px;padding:14px 14px 14px 16px;transition:border-color .15s,transform 60ms;display:flex}.card:hover{border-color:var(--c,var(--accent))}.card:active{transform:scale(.99)}.card-dot{background:var(--c,var(--accent));width:14px;height:14px;box-shadow:0 0 0 4px color-mix(in srgb, var(--c,var(--accent)) 22%, transparent);border-radius:50%;flex:none}.card-dot.big{width:18px;height:18px;margin-top:10px}.card-text{flex-direction:column;flex:1;min-width:0;display:flex}.card-title{font-size:17px;font-weight:750}.card-desc{color:var(--muted);font-size:14px;line-height:1.4}.chev{color:var(--muted);flex:none}.empty{color:var(--muted);text-align:center;margin-top:24px}.skeleton-list{gap:10px;margin-top:22px;display:grid}.skeleton{border-radius:var(--radius);background:linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2));background-size:200% 100%;height:72px;animation:1.2s linear infinite shimmer}.skeleton.tall{height:420px}@keyframes shimmer{to{background-position:-200% 0}}.back-link{cursor:pointer;min-height:44px;color:var(--accent);background:0 0;border:0;border-radius:10px;align-items:center;gap:4px;margin:-6px 0 6px -4px;padding:0 10px 0 4px;font-weight:700;display:inline-flex}.detail-head{align-items:flex-start;gap:14px;margin-bottom:18px;display:flex}.detail-head h1{letter-spacing:-.02em;font-size:clamp(26px,6vw,34px);line-height:1.15}.detail-head p{color:var(--muted);margin-top:6px;font-size:17px}.detail-grid{gap:16px;display:grid}@media (width>=960px){.detail-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"diagram camera""steps camera";align-items:start}.diagram-panel{grid-area:diagram}.steps-panel{grid-area:steps}.camera-panel{grid-area:camera;position:sticky;top:84px}}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0;padding:16px}.panel-head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;display:flex}.panel-title{font-size:18px;font-weight:800}.camera-panel .panel-title,.steps-panel .panel-title{margin-bottom:12px}.hand-diagram{border:1px solid var(--border);background:#fff;border-radius:12px;width:100%;height:auto;display:block}.points-line{margin-top:12px;font-size:15px}.steps{counter-reset:step;gap:12px;margin:0;padding:0;list-style:none;display:grid}.steps li{counter-increment:step;min-height:30px;padding-left:42px;position:relative}.steps li:before{content:counter(step);background:color-mix(in srgb, var(--c,var(--accent)) 20%, var(--surface));width:30px;height:30px;color:var(--text);border-radius:50%;place-items:center;font-size:14px;font-weight:800;display:grid;position:absolute;top:-1px;left:0}.cam-frame{--cam-max-h:62vh;aspect-ratio:4/3;width:100%;max-height:var(--cam-max-h);background:var(--surface-2);border-radius:14px;margin-inline:auto;position:relative;overflow:hidden}.cam-frame video,.cam-frame canvas{object-fit:cover;visibility:hidden;width:100%;height:100%;position:absolute;inset:0}.cam-frame.on video,.cam-frame.on canvas{visibility:visible}.cam-frame.on{background:#000}.cam-frame video{transform:scaleX(-1)}.cam-off{text-align:center;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:20px;display:flex;position:absolute;inset:0}.cam-off svg{flex:none;width:44px;height:44px}.cam-off p{max-width:30ch}.cam-off .fine{font-size:13px}.live-msg{border-radius:12px;margin-top:12px;padding:12px 14px;font-size:16px;font-weight:650}.live-msg.info{background:var(--info-bg);color:var(--info)}.live-msg.good{background:var(--good-bg);color:var(--good)}.cam-actions{flex-wrap:wrap;gap:10px;margin-top:12px;display:flex}.cam-actions .btn{flex:140px}.notice{border-radius:12px;justify-items:start;gap:12px;padding:16px;display:grid}.notice-error{background:var(--danger-bg);color:var(--danger)}.notice.small{margin-top:12px;padding:12px 14px;font-size:15px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}