:root{--background:#f6f8f9;--foreground:#171a1b;--primary:#67b337;--primary-foreground:#fff;--secondary:#edf2ed;--secondary-foreground:#1b2b1a;--muted:#eef1f2;--muted-foreground:#647078;--border:#d9dfe2;--input:#cfd7db;--ring:#67b337;--destructive:#c93636;--radius:.75rem;--header:#171b1d;--orange:#f68b1f}*{box-sizing:border-box}html{background:var(--background);min-width:320px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif}body{background:var(--background);min-height:100vh;color:var(--foreground);margin:0}button,input,select{font:inherit}.ui-button{color:#fff;background:var(--primary);border:1px solid var(--primary);white-space:nowrap;cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:8px;height:38px;padding:0 14px;font-size:.84rem;font-weight:750;transition:background .14s,border-color .14s,transform .14s;display:inline-flex}.ui-button:hover:not(:disabled){background:#559d2c;border-color:#559d2c}.ui-button:active:not(:disabled){transform:translateY(1px)}.ui-button:focus-visible,.ui-input:focus-visible,.native-select:focus-visible{outline-offset:2px;outline:3px solid #67b33752}.ui-button:disabled{opacity:.5;cursor:not-allowed}.ui-button.is-outline{color:#313b40;background:#fff;border-color:#cfd7db}.ui-button.is-outline:hover:not(:disabled){color:#294d1b;background:#f4f8f2;border-color:#9fc58b}.ui-button.is-ghost{color:inherit;background:0 0;border-color:#0000}.ui-button.is-sm{height:34px;padding-inline:10px;font-size:.78rem}.ui-button.is-lg{height:40px}.ui-button svg{width:17px;height:17px}.ui-input,.native-select{color:#1f282c;border:1px solid var(--input);background:#fff;width:100%}.native-select-wrapper{width:100%;position:relative}.native-select{appearance:none;background-image:linear-gradient(45deg,#0000 50%,#6d787d 50%),linear-gradient(135deg,#6d787d 50%,#0000 50%);background-position:calc(100% - 16px),calc(100% - 11px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;padding:0 34px 0 11px}.native-select:disabled{color:#536058;opacity:1;background-color:#f0f4ef}.preview-app{min-height:100vh}.login-page{background:radial-gradient(circle at 18% 12%,#67b33726,#0000 34%),radial-gradient(circle at 88% 85%,#f68b1f1a,#0000 30%),#111516;place-content:center;gap:18px;min-height:100vh;padding:28px 18px;display:grid}.login-panel{color:#1c2326;background:#fff;border:1px solid #ffffff59;border-radius:20px;width:min(92vw,430px);padding:34px;box-shadow:0 28px 80px #00000057}.login-brand{color:#677278;justify-content:space-between;align-items:center;gap:18px;margin-bottom:34px;font-size:.78rem;font-weight:750;display:flex}.login-brand .brand-word{color:#171b1d}.login-icon{color:#fff;background:var(--primary);border-radius:13px;place-items:center;width:48px;height:48px;margin-bottom:18px;display:grid;box-shadow:0 10px 24px #67b33747}.login-icon svg{width:24px;height:24px}.login-panel h1{letter-spacing:-.035em;margin:0;font-size:1.65rem;font-weight:850}.login-panel>p{color:#69747a;margin:9px 0 24px;font-size:.91rem;line-height:1.55}.pin-form{gap:10px;display:grid}.pin-form label{color:#4c585e;font-size:.78rem;font-weight:800}.pin-form input{letter-spacing:.22em;border-radius:10px;height:50px;padding-inline:15px;font-size:1.25rem;font-weight:800}.pin-form button{border-radius:10px;height:48px;margin-top:7px;font-weight:800}.pin-help{color:#7b878d;font-size:.72rem}.pin-error{color:#9d2929;background:#fff0f0;border:1px solid #f3cece;border-radius:8px;padding:9px 11px;font-size:.78rem;font-weight:700}.login-resolution{color:#aeb7ba;text-align:center;margin:0;font-size:.74rem;font-weight:650}.topbar{z-index:60;color:#fff;background:var(--header);border-bottom:1px solid #2e3436;justify-content:space-between;align-items:center;gap:24px;min-height:62px;padding:0 24px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:20px;min-width:0;display:flex}.brand-word{letter-spacing:-.04em;white-space:nowrap;font-size:1.25rem;font-weight:850}.brand-word span{color:var(--primary)}.brand-divider{background:#4b5357;width:1px;height:28px}.product-name{text-overflow:ellipsis;white-space:nowrap;font-size:1.05rem;font-weight:700;overflow:hidden}.live-status{color:#e5eaec;flex:none;align-items:center;gap:9px;font-size:.875rem;font-weight:650;display:flex}.live-dot{background:var(--primary);border-radius:999px;width:10px;height:10px;box-shadow:0 0 0 4px #67b33724}.viewer-actions{flex:none;align-items:center;gap:10px;display:flex}.viewer-chip{color:#e7edee;background:#262c2e;border:1px solid #3b4447;border-radius:8px;align-items:center;gap:7px;max-width:220px;padding:7px 10px;font-size:.78rem;font-weight:750;display:flex}.viewer-chip svg{width:15px;height:15px;color:var(--primary);flex:none}.viewer-chip span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.logout-button{color:#e7edee!important}.logout-button:hover{color:#fff!important;background:#343b3e!important}.filterbar{z-index:50;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff5;grid-template-columns:minmax(180px,1fr) minmax(190px,1.2fr) minmax(240px,1.6fr) 132px auto;align-items:end;gap:14px;padding:12px 24px 14px;display:grid;position:sticky;top:62px}.filter-field{gap:6px;min-width:0;display:grid}.filter-field>span{color:#5a656b;font-size:.75rem;font-weight:700}.filter-field [data-slot=native-select-wrapper]{width:100%}.filter-field [data-slot=native-select]{background:#fff;border-radius:9px;height:40px;font-size:.875rem;font-weight:600}.toolbar-actions{justify-content:flex-end;align-items:center;gap:8px;display:flex}.toolbar-actions button{border-radius:9px;height:40px;padding-inline:14px}.workspace{grid-template-columns:258px minmax(0,1fr);min-height:calc(100vh - 130px);display:grid}.lesson-rail{border-right:1px solid var(--border);background:#fff;align-self:start;height:calc(100vh - 130px);position:sticky;top:130px;overflow:hidden}.rail-heading{border-bottom:1px solid #ebeff1;justify-content:space-between;align-items:center;height:58px;padding:0 18px 0 20px;display:flex}.rail-heading h2,.filmstrip-heading h2{margin:0;font-size:.94rem;font-weight:800}.rail-heading span{color:#3c6e24;background:#eaf4e5;border-radius:999px;justify-content:center;align-items:center;min-width:30px;height:24px;padding:0 8px;font-size:.75rem;font-weight:800;display:inline-flex}.lesson-rail nav{height:calc(100% - 58px);padding:8px;overflow-y:auto}.lesson-link{color:#374146;text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:9px;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-height:48px;padding:8px 10px;display:grid}.lesson-link:hover{background:#f2f5f3}.lesson-link:focus-visible,.page-thumbnail:focus-visible{outline-offset:1px;outline:3px solid #67b33759}.lesson-link.is-active{color:#315b1f;background:#e9f4e4;border-color:#d5e9cc}.lesson-number{color:#758187;font-size:.78rem;font-weight:850}.is-active .lesson-number{color:var(--primary)}.lesson-title{text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;font-weight:650;line-height:1.25;overflow:hidden}.lesson-page-count{color:#8b969b;font-size:.7rem;font-weight:750}.preview-workbench{min-width:0;padding:22px 28px 32px}.preview-heading-row{justify-content:space-between;align-items:flex-start;gap:20px;width:min(100%,1240px);margin:0 auto 14px;display:flex}.preview-heading-row h1{letter-spacing:-.025em;margin:0;font-size:clamp(1.28rem,2vw,1.75rem);font-weight:820}.preview-heading-row p{color:#69747a;margin:6px 0 0;font-size:.84rem;font-weight:550}.verified-label{color:#477d2b;flex:none;align-items:center;gap:7px;padding-top:5px;font-size:.8rem;font-weight:750;display:flex}.verified-label svg{width:17px;height:17px}.tablet-shell{aspect-ratio:8/5;background:#111415;border:1px solid #3f474a;border-radius:clamp(22px,2.3vw,34px);width:min(100%,1240px);margin:0 auto;padding:clamp(11px,1.2vw,18px);position:relative;overflow:hidden;box-shadow:0 22px 58px #121a1d38,inset 0 0 0 2px #080a0b}.tablet-shell:fullscreen{aspect-ratio:auto;background:#000;border:0;border-radius:0;width:100vw;max-width:none;height:100vh;padding:0}.tablet-shell:fullscreen .tablet-render-host{border-radius:0}.tablet-camera{z-index:2;background:#3d4447;border-radius:999px;width:5px;height:5px;position:absolute;top:5px;left:50%;transform:translate(-50%)}.tablet-render-host{background:#000;border-radius:clamp(12px,1.2vw,18px);width:100%;height:100%;position:relative;overflow:hidden}.tablet-render-frame{transform-origin:0 0;background:#000;border:0;width:1920px;height:1200px;position:absolute;top:0;left:0}.tablet-render-frame.is-thumbnail{pointer-events:none}.filmstrip-section{width:min(100%,1240px);margin:22px auto 0}.filmstrip-heading{justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:10px;display:flex}.filmstrip-heading span{color:#727d82;font-size:.78rem}.filmstrip{scroll-snap-type:x proximity;gap:10px;margin:0;padding:2px 2px 12px;list-style:none;display:flex;overflow-x:auto}.filmstrip>li{flex:0 0 188px}.page-thumbnail{color:#4c565b;cursor:pointer;scroll-snap-align:start;background:#fff;border:1px solid #d9dfe2;border-radius:10px;gap:7px;width:100%;padding:6px 6px 8px;display:grid;position:relative;box-shadow:0 4px 14px #141f230d}.page-thumbnail:hover{border-color:#a8b5bb;transform:translateY(-1px)}.page-thumbnail.is-active{color:#315b1f;border-color:var(--primary);box-shadow:0 0 0 2px #67b33733,0 5px 16px #3867201f}.thumbnail-screen{aspect-ratio:8/5;background:#000;border-radius:6px;width:100%;overflow:hidden}.page-thumbnail>span{justify-self:center;font-size:.76rem;font-weight:800}.page-thumbnail em{color:#fff;background:#14181ad6;border-radius:5px;padding:3px 6px;font-size:.62rem;font-style:normal;font-weight:750;position:absolute;top:10px;right:10px}.state-panel{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:calc(100vh - 130px);padding:48px 24px;display:flex}.state-panel svg{width:30px;height:30px;color:var(--primary)}.state-panel h1{margin:4px 0 0;font-size:1.35rem}.state-panel p{max-width:470px;color:var(--muted-foreground);margin:0 0 8px}.spin{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=1220px){.filterbar{grid-template-columns:repeat(4,minmax(130px,1fr))}.toolbar-actions{grid-column:1/-1;justify-content:flex-start}.lesson-rail{height:calc(100vh - 183px);top:183px}}@media (width<=860px){.topbar,.filterbar{position:relative;top:auto}.filterbar{grid-template-columns:1fr 1fr;padding-inline:16px}.toolbar-actions{padding-bottom:2px;overflow-x:auto}.toolbar-actions button{flex:none}.workspace{display:block}.lesson-rail{border-right:0;border-bottom:1px solid var(--border);width:100%;height:auto;position:relative;top:auto}.rail-heading{height:48px}.lesson-rail nav{gap:6px;height:auto;padding:8px 12px 12px;display:flex;overflow-x:auto}.lesson-link{flex:0 0 220px}.preview-workbench{padding:18px 14px 28px}.verified-label,.live-status{display:none}}@media (width<=560px){.topbar{min-height:56px;padding-inline:15px}.brand{gap:10px}.brand-word{font-size:1rem}.brand-divider{height:22px}.product-name{font-size:.9rem}.live-status{font-size:0}.viewer-chip{max-width:128px}.logout-button{width:36px;font-size:0;padding:0!important}.logout-button svg{width:17px;height:17px}.filterbar{grid-template-columns:1fr}.toolbar-actions span{display:none}.toolbar-actions button:first-child span{display:inline}.preview-heading-row p{line-height:1.55}.tablet-shell{border-radius:16px;padding:7px}.filmstrip>li{flex-basis:154px}.filmstrip-heading span{display:none}}@media (width<=420px){.login-panel{padding:26px 22px}.login-brand{margin-bottom:27px}.product-name,.viewer-chip{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}