/* Nocaly responsive editorial design system */
:root{
  --n-forest:#073f35;
  --n-forest-deep:#042f28;
  --n-forest-soft:#176253;
  --n-lime:#dcf257;
  --n-lime-hover:#d2e84d;
  --n-ivory:#f7f5ed;
  --n-paper:#fffefa;
  --n-ink:#102e29;
  --n-muted:#687873;
  --n-line:#d9e1db;
  --n-coral:#ed9478;
  --n-blue:#bcddea;
  --n-shadow-sm:0 6px 18px rgba(7,63,53,.07);
  --n-shadow-md:0 16px 42px rgba(7,63,53,.11);
  --n-shadow-lg:0 28px 80px rgba(3,40,33,.17);
  --n-serif:"Libre Baskerville","Noto Serif SC","Songti SC",Georgia,serif;
  --n-sans:"DM Sans","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --n-ease:cubic-bezier(.2,.8,.2,1);
}

html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
html.lumo-i18n-pending{background:var(--n-ivory)}
html.lumo-i18n-pending body{visibility:hidden}
html.lumo-i18n-pending::before{content:"Nocaly";position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;background:var(--n-ivory);color:var(--n-forest);font:700 1.25rem/1 var(--n-serif);letter-spacing:-.02em}
body{font-family:var(--n-sans);color:var(--n-ink);background:var(--n-ivory);font-synthesis:none;text-rendering:optimizeLegibility}
body,button,input,select,textarea{font-family:var(--n-sans)}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{max-width:100%}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button{min-height:42px}
:where(p,h1,h2,h3,h4,li,span,b,small,a,button,label){overflow-wrap:anywhere}
:where(main,section,article,aside,div,header,footer,nav){min-width:0}
:focus-visible{outline:3px solid rgba(23,98,83,.3);outline-offset:3px}
::selection{background:var(--n-lime);color:var(--n-ink)}

/* Shared motion language */
.marketing-page button,.auth-page button,.workspace-page button,.legal-page a,.video-page button{
  transition:transform .16s var(--n-ease),box-shadow .18s var(--n-ease),background-color .18s,border-color .18s,color .18s,opacity .18s;
}
.marketing-page button:not(:disabled):active,.auth-page button:not(:disabled):active,.workspace-page button:not(:disabled):active,.video-page button:not(:disabled):active{transform:scale(.97)}
.marketing-page .primary:not(:disabled):hover,.workspace-page .new-btn:not(:disabled):hover,.auth-page .submit:not(:disabled):hover{
  transform:translateY(-2px);box-shadow:0 10px 24px rgba(7,63,53,.16)
}
.marketing-page .reveal.visible,.workspace-page .view.active{animation:n-page-in .34s var(--n-ease)}
@keyframes n-page-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes n-spin{to{transform:rotate(360deg)}}
@keyframes n-pulse{50%{box-shadow:0 0 0 7px rgba(220,242,87,.18)}}
@keyframes n-check{50%{transform:scale(1.16)}}
@keyframes n-toast{from{opacity:0;transform:translate(-50%,16px) scale(.98)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* Marketing */
.marketing-page{background:radial-gradient(circle at 82% 7%,rgba(195,222,205,.42),transparent 23%),var(--n-ivory)}
.marketing-page .container{width:min(1240px,calc(100% - clamp(32px,6vw,96px)))}
.marketing-page .nav-wrap{background:rgba(247,245,237,.9);border-color:rgba(7,63,53,.1)}
.marketing-page .nav{height:80px}
.marketing-page .brand{font-family:var(--n-serif);font-size:1.32rem}
.marketing-page .brand-mark{background:transparent;color:var(--n-forest);font-size:1.35rem;border-radius:0}
.marketing-page .nav-links{gap:clamp(20px,3vw,40px)}
.marketing-page .nav-links a{position:relative;font-size:.9rem;font-weight:600}
.marketing-page .nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:var(--n-forest);transition:right .2s var(--n-ease)}
.marketing-page .nav-links a:hover:after{right:0}
.marketing-page .language-select{min-height:42px;border-radius:10px;border-color:var(--n-line);background:var(--n-paper);font-size:.84rem}
.marketing-page .primary{position:relative;overflow:hidden;border-radius:11px;background:var(--n-forest);font-size:.92rem;min-height:46px}
.marketing-page .primary:after{content:"";position:absolute;inset:-80% auto -80% -42%;width:24%;transform:rotate(18deg);background:rgba(255,255,255,.28);transition:left .45s var(--n-ease)}
.marketing-page .primary:hover:after{left:120%}
.marketing-page .hero{min-height:min(790px,calc(100vh - 80px));grid-template-columns:minmax(0,.92fr) minmax(460px,1.08fr);gap:clamp(35px,6vw,88px);padding-block:clamp(65px,8vh,105px)}
.marketing-page h1{font-family:var(--n-serif);font-size:clamp(3rem,5.3vw,4.85rem);letter-spacing:-.045em;line-height:1.09}
.marketing-page h1 em{font-family:inherit;color:#416f61}
.marketing-page .hero-sub{font-size:clamp(1rem,1.4vw,1.17rem);line-height:1.75}
.marketing-page .hero-actions{flex-wrap:wrap}
.marketing-page .app-shell{border-radius:18px;box-shadow:var(--n-shadow-lg);border-color:rgba(7,63,53,.12)}
.marketing-page .float-card{box-shadow:var(--n-shadow-md)}
.marketing-page .step,.marketing-page .feature-grid article,.marketing-page .story-card{transition:transform .22s var(--n-ease),box-shadow .22s}
.marketing-page .step:hover,.marketing-page .feature-grid article:hover,.marketing-page .story-card:hover{transform:translateY(-4px)}
.marketing-page .step-visual{border-radius:16px;border:1px solid rgba(7,63,53,.08)}
.marketing-page .split-heading h2,.marketing-page .feature-heading h2,.marketing-page .story-side h2,.marketing-page .cta-section h2{font-family:var(--n-serif);letter-spacing:-.04em}
.marketing-page .cta-section{border-radius:20px}
.marketing-page .footer{font-size:.85rem}

/* Authentication */
.auth-page{background:var(--n-ivory)}
.auth-page>.brand{z-index:4;font-family:var(--n-serif);font-size:1.3rem;color:#fff}
.auth-page>.brand span{color:var(--n-lime)}
.auth-page main{grid-template-columns:minmax(560px,1.16fr) minmax(520px,.84fr)}
.auth-page .auth-copy{padding:clamp(100px,12vh,145px) clamp(54px,7vw,120px);background:radial-gradient(circle at 20% 85%,rgba(220,242,87,.13),transparent 29%),linear-gradient(150deg,var(--n-forest),var(--n-forest-deep))}
.auth-page .auth-copy-inner{width:min(680px,100%);margin-inline:auto}
.auth-page .auth-copy h1{font-family:var(--n-serif);font-size:clamp(2.7rem,5vw,4.3rem);letter-spacing:-.045em;line-height:1.13}
.auth-page .auth-copy>p{font-size:1rem;line-height:1.75}
.auth-page .mini-app{width:min(440px,100%);padding:21px 22px;border-radius:14px;box-shadow:0 24px 56px rgba(0,0,0,.17)}
.auth-page .mini-app small{display:block;margin-top:7px;color:#728179;font-size:.72rem}.auth-page .mini-app i{width:62px;height:62px;font-size:.78rem}
.auth-page .auth-proof{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:24px;color:#c9d8d2;font-size:.8rem}.auth-page .auth-proof span{display:flex;align-items:center;gap:7px}.auth-page .auth-proof b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(220,242,87,.12);color:var(--n-lime);font-size:.68rem}
.auth-page .auth-card{width:min(540px,calc(100% - 64px));padding:clamp(34px,3vw,48px);border-radius:18px;box-shadow:0 28px 80px rgba(7,63,53,.14);margin-inline:auto}
.auth-page .auth-card-intro{margin-bottom:25px}.auth-page .auth-card-intro>span{display:block;color:var(--n-forest-soft);font-size:.7rem;font-weight:700;letter-spacing:.15em}.auth-page .auth-card-intro h2{margin:10px 0 7px;font-family:var(--n-serif);font-size:clamp(1.55rem,2vw,2rem);font-weight:400;letter-spacing:-.025em}.auth-page .auth-card-intro p{margin:0;color:var(--n-muted);font-size:.87rem;line-height:1.55}
.auth-page .tabs{border-radius:10px;padding:5px}
.auth-page .tabs button{font-size:.9rem;padding:12px;border-radius:7px}
.auth-page form label{font-size:.82rem;gap:8px;margin-top:18px}
.auth-page input,.auth-page select{min-height:48px;padding:13px 14px;border-radius:9px;font-size:.94rem}
.auth-page input:focus,.auth-page select:focus{border-color:var(--n-forest-soft);box-shadow:0 0 0 3px rgba(23,98,83,.11)}
.auth-page .submit{min-height:50px;border-radius:9px;background:var(--n-lime);color:var(--n-ink);font-size:.93rem}
.auth-page .text-link{font-size:.82rem;min-height:36px}
.auth-page .form-error{font-size:.78rem}
.auth-page .privacy{font-size:.78rem}
.auth-page .auth-assurance{display:flex;gap:11px;align-items:flex-start;margin-top:20px;padding:13px 14px;border:1px solid #e0e6df;border-radius:10px;background:#f7f8f3}.auth-page .auth-assurance>span{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#e7f2c3;color:var(--n-forest);font-weight:700}.auth-page .auth-assurance p{margin:0}.auth-page .auth-assurance b,.auth-page .auth-assurance small{display:block}.auth-page .auth-assurance b{font-size:.78rem}.auth-page .auth-assurance small{margin-top:3px;color:var(--n-muted);font-size:.69rem;line-height:1.45}.auth-page .auth-card.flow-active .auth-card-intro,.auth-page .auth-card.flow-active .auth-assurance{display:none}

/* Workspace shell */
.workspace-page{background:radial-gradient(circle at 78% 0,rgba(197,222,204,.38),transparent 24%),var(--n-ivory)}
.workspace-page .sidebar{width:236px;padding:29px 18px 20px;background:linear-gradient(180deg,var(--n-forest),var(--n-forest-deep));box-shadow:12px 0 40px rgba(3,47,40,.05)}
.workspace-page .sidebar .brand{font-family:var(--n-serif);font-size:1.34rem;padding-inline:11px}
.workspace-page .sidebar .brand span{color:var(--n-lime);background:transparent;font-size:1.35rem}
.workspace-page .sidebar nav{margin-top:48px;gap:8px}
.workspace-page .nav-item,.workspace-page .side-bottom button{min-height:48px;height:auto;padding:12px 14px;border-radius:10px;font-size:.91rem;position:relative}
.workspace-page .nav-item:hover{transform:translateX(2px)}
.workspace-page .nav-item.active{background:rgba(255,255,255,.11);box-shadow:none}
.workspace-page .nav-item.active:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:5px;background:var(--n-lime)}
.workspace-page .nav-item em{font-size:.72rem;min-width:22px;height:22px;border-radius:7px}
.workspace-page .profile>span{width:36px;height:36px;font-size:.72rem}
.workspace-page .profile b{font-size:.85rem}.workspace-page .profile small{font-size:.72rem}
.workspace-page main{margin-left:236px}
.workspace-page .topbar{height:80px;padding-inline:clamp(20px,3vw,42px);background:rgba(247,245,237,.9)}
.workspace-page .crumb{font-size:.85rem}
.workspace-page .crumb b{font-family:var(--n-serif);font-size:.94rem}
.workspace-page .icon-btn,.workspace-page .new-btn,.workspace-page .soft-button{position:relative;overflow:hidden;min-height:44px;border-radius:10px;padding:11px 16px;font-size:.84rem}
.workspace-page .new-btn{background:var(--n-lime);border-color:var(--n-lime);color:var(--n-ink)}
.workspace-page .new-btn:hover{background:var(--n-lime-hover)}
.workspace-page #focusBtn.running{background:#edf5d0;border-color:#becf68;animation:n-pulse 1.8s infinite}
.workspace-page .view{max-width:1540px;padding:clamp(32px,4vw,56px) clamp(22px,4vw,56px) 80px}
.workspace-page .welcome{margin-bottom:36px;gap:22px}
.workspace-page .welcome h1,.workspace-page .page-heading h1,.workspace-page .course-hero h1{font-family:var(--n-serif);font-size:clamp(2rem,3vw,2.7rem);letter-spacing:-.045em;line-height:1.2}
.workspace-page .welcome p,.workspace-page .page-heading span{font-size:.88rem;line-height:1.6}
.workspace-page .streak{padding:13px 17px;border-radius:12px;flex:none;transition:transform .2s var(--n-ease),box-shadow .2s}
.workspace-page .streak:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:var(--n-shadow-sm)}
.workspace-page .streak b{font-size:.88rem}.workspace-page .streak small{font-size:.72rem}
.workspace-page .today-grid{grid-template-columns:minmax(0,1fr) minmax(310px,360px);gap:clamp(18px,2.4vw,32px)}
.workspace-page .section-title h2,.workspace-page .card-head,.workspace-page .empty-state h3{font-family:var(--n-serif)}
.workspace-page .section-title h2{font-size:1.35rem}.workspace-page .section-title p{font-size:.78rem}
.workspace-page .section-title button,.workspace-page .card-head button{font-size:.78rem;min-height:36px;border-radius:8px;padding-inline:9px}
.workspace-page .task-list{gap:10px}
.workspace-page .task{min-height:67px;padding:15px 17px;border-radius:12px;transition:transform .18s var(--n-ease),box-shadow .18s,border-color .18s,background .18s}
.workspace-page .task:hover{transform:translateX(3px);border-color:#afc1b8;box-shadow:var(--n-shadow-sm);background:#fff}
.workspace-page .task-check{width:27px;height:27px;min-height:27px;border-radius:7px;flex:none}
.workspace-page .task.done .task-check{animation:n-check .35s var(--n-ease)}
.workspace-page .task-info b{font-size:.9rem}.workspace-page .task-info small{font-size:.72rem}.workspace-page .task-time{font-size:.73rem;white-space:nowrap}
.workspace-page .course-cards{gap:15px}
.workspace-page .course-card,.workspace-page .card,.workspace-page .library-card,.workspace-page .material-item,.workspace-page .generated-note,.workspace-page .mini-flash,.workspace-page .video-balance-card,.workspace-page .credit-balance-card,.workspace-page .video-panel,.workspace-page .video-guide{
  border-radius:14px;box-shadow:0 2px 8px rgba(7,63,53,.035);transition:transform .2s var(--n-ease),box-shadow .2s,border-color .2s;
}
.workspace-page .course-card{padding:20px;min-height:185px}
.workspace-page .course-card:hover,.workspace-page .card:hover,.workspace-page .library-card:hover,.workspace-page .mini-flash:hover{transform:translateY(-4px);box-shadow:var(--n-shadow-md);border-color:#b7c7c0}
.workspace-page .course-card b{font-size:.92rem}.workspace-page .course-card small{font-size:.73rem}
.workspace-page .course-card .symbol{width:43px;height:43px;margin-bottom:29px}
.workspace-page .course-card .progress{height:6px;margin-top:18px;overflow:hidden}
.workspace-page .course-card .progress i,.workspace-page .usage-track i,.workspace-page .allowance-track i{transition:width .7s var(--n-ease)}
.workspace-page .right-column{gap:16px}
.workspace-page .card{padding:21px}.workspace-page .card-head{font-size:.9rem}
.workspace-page .ring-chart{height:175px}.workspace-page .ring-chart b{font-size:2rem}.workspace-page .ring-chart small{font-size:.72rem}
.workspace-page .metrics span{font-size:.7rem}.workspace-page .metrics b{font-size:1.05rem}
.workspace-page .deadline{margin-top:16px}.workspace-page .deadline b{font-size:.78rem}.workspace-page .deadline small,.workspace-page .deadline>span{font-size:.68rem}
.workspace-page .tip-card{border-radius:14px;padding:19px}.workspace-page .tip-card b{font-size:.82rem}.workspace-page .tip-card p{font-size:.76rem}
.workspace-page .page-heading{gap:22px;flex-wrap:wrap}
.workspace-page .page-heading p{font-size:.72rem}.workspace-page .page-heading span{max-width:720px}
.workspace-page .course-library{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.workspace-page .library-card{padding:23px}.workspace-page .library-card h3{font-family:var(--n-serif);font-size:1.08rem}.workspace-page .library-card>small,.workspace-page .library-meta{font-size:.73rem}
.workspace-page .empty-course{border-radius:14px;min-height:230px;padding:22px}
.workspace-page .course-tabs{gap:clamp(14px,3vw,30px);overflow-x:auto;scrollbar-width:none}.workspace-page .course-tabs::-webkit-scrollbar{display:none}.workspace-page .course-tabs button{font-size:.82rem;white-space:nowrap;min-height:44px}
.workspace-page .material-drop{border-radius:14px;padding:24px}.workspace-page .material-drop b{font-size:.84rem}.workspace-page .material-drop small{font-size:.72rem}.workspace-page .material-drop button{font-size:.76rem;min-height:40px}
.workspace-page .material-item{padding:15px}.workspace-page .material-item b{font-size:.8rem}.workspace-page .material-item small{font-size:.69rem}.workspace-page .material-item button{font-size:.72rem;min-height:38px}
.workspace-page .generated-note{padding:clamp(24px,4vw,40px)}.workspace-page .generated-note h2{font-family:var(--n-serif);font-size:1.65rem}.workspace-page .generated-note h3{font-size:1rem}.workspace-page .generated-note p,.workspace-page .generated-note li{font-size:.9rem}
.workspace-page .flash-stage{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.workspace-page .mini-flash{padding:24px}.workspace-page .mini-flash small{font-size:.7rem}.workspace-page .mini-flash b{font-size:1rem}
.workspace-page .review-layout{max-width:700px}.workspace-page .review-front,.workspace-page .review-back{border-radius:16px;font-size:clamp(1.2rem,2vw,1.65rem)}
.workspace-page .review-actions{flex-wrap:wrap}.workspace-page .review-actions button{font-size:.82rem;min-width:130px}.workspace-page .review-actions small{font-size:.68rem}
.workspace-page .video-balance-grid{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr)}
.workspace-page .video-balance-card,.workspace-page .credit-balance-card,.workspace-page .video-panel,.workspace-page .video-guide{padding:clamp(20px,3vw,28px)}
.workspace-page .video-balance-card small,.workspace-page .credit-balance-card small,.workspace-page .video-guide>small,.workspace-page .video-panel-head small{font-size:.7rem}
.workspace-page .video-balance-card strong,.workspace-page .credit-balance-card strong{font-size:clamp(1.45rem,2vw,1.9rem)}
.workspace-page .video-balance-card p,.workspace-page .credit-balance-card p{font-size:.86rem}
.workspace-page .video-row{grid-template-columns:76px minmax(0,1fr) auto}.workspace-page .video-row small,.workspace-page .video-guide li span{font-size:.78rem}
.workspace-page .modal{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.workspace-page .modal.open .modal-box{animation:n-page-in .23s var(--n-ease)}
.workspace-page .modal-box{width:min(580px,100%);max-height:min(90vh,900px);border-radius:16px;padding:clamp(24px,4vw,36px)}
.workspace-page .video-player-modal{overflow:auto!important}
.workspace-page .modal-box.small{width:min(460px,100%)}
.workspace-page .modal h2{font-family:var(--n-serif);font-size:1.55rem}.workspace-page .modal p{font-size:.82rem}.workspace-page .modal label{font-size:.8rem}
.workspace-page .modal input,.workspace-page .modal select,.workspace-page .modal textarea,.workspace-page .support-modal select,.workspace-page .support-modal textarea{min-height:46px;border-radius:9px;font-size:.87rem;padding:12px 13px}
.workspace-page .modal textarea{min-height:120px}
.workspace-page .modal input:focus,.workspace-page .modal select:focus,.workspace-page .modal textarea:focus{border-color:var(--n-forest-soft);box-shadow:0 0 0 3px rgba(23,98,83,.1)}
.workspace-page .toast{left:calc(50% + 118px);bottom:max(26px,env(safe-area-inset-bottom));padding:13px 19px;border-radius:10px;font-size:.82rem;box-shadow:var(--n-shadow-md)}
.workspace-page .toast.show{animation:n-toast .25s var(--n-ease)}
.workspace-page .billing-status-modal{width:min(980px,96vw);max-width:980px}.workspace-page .billing-plan-grid{grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px}
.workspace-page .billing-plan-card{padding:17px;border-radius:12px}.workspace-page .billing-plan-card small,.workspace-page .billing-plan-card span,.workspace-page .billing-plan-card li{font-size:.7rem}.workspace-page .billing-plan-card b{font-size:.83rem}.workspace-page .billing-plan-card strong{font-size:1.35rem}.workspace-page .billing-card-action{font-size:.76rem;min-height:40px}
.workspace-page .usage-grid article{padding:19px}.workspace-page .usage-grid article>span{font-size:.75rem}.workspace-page .usage-grid small{font-size:.7rem}

/* Legal */
.legal-page{background:radial-gradient(circle at 15% 0,rgba(206,225,211,.38),transparent 24%),var(--n-ivory)}
.legal-page>header{height:80px;background:rgba(247,245,237,.92)}
.legal-page .brand{font-family:var(--n-serif);font-size:1.3rem}.legal-page .brand span{background:transparent;color:var(--n-forest);font-size:1.35rem}
.legal-page .header-actions>a{font-size:.86rem}.legal-page select{min-height:42px;border-radius:9px;font-size:.82rem}
.legal-page main{width:min(1240px,calc(100% - clamp(32px,6vw,96px)));grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:clamp(50px,8vw,110px);padding-block:clamp(52px,7vw,90px)}
.legal-page aside h1,.legal-page h2{font-family:var(--n-serif)}
.legal-page aside h1{font-size:clamp(2.1rem,3.2vw,2.8rem);letter-spacing:-.04em}
.legal-page nav a{font-size:.88rem;transition:padding .18s,color .18s}
.legal-page article section{scroll-margin-top:104px}
.legal-page .intro{padding:clamp(26px,4vw,42px);border-radius:16px;box-shadow:var(--n-shadow-sm)}
.legal-page h2{font-size:clamp(1.75rem,3vw,2.25rem)}.legal-page h3{font-size:1rem}.legal-page p,.legal-page li{font-size:.94rem;line-height:1.82}
.legal-page .primary{border-radius:9px;display:inline-flex;align-items:center;min-height:44px}

/* Video lesson preview */
.video-page{background:radial-gradient(circle at 70% 0,rgba(206,225,211,.45),transparent 30%),#ece9e0}
.video-page .lesson-shell{width:min(1180px,100%);padding:clamp(14px,3vw,34px)}
.video-page .lesson-shell>header{font-size:.78rem;gap:16px;flex-wrap:wrap}
.video-page .player{border-radius:16px;box-shadow:var(--n-shadow-lg);min-height:0}
.video-page .controls button{min-height:36px}

/* Rendering performance: keep off-screen marketing content out of the initial paint,
   reduce full-screen blur cost, and isolate large workspace views. */
.marketing-page .logo-strip,.marketing-page .pain-section,.marketing-page .feature-section,.marketing-page .pricing-section,.marketing-page .stories,.marketing-page .cta-section,.marketing-page .footer{content-visibility:auto;contain-intrinsic-size:auto 720px}
.workspace-page .view{contain:layout style}
.workspace-page .topbar{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.workspace-page .modal,.marketing-page .modal{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* Responsive protections: zooming narrows CSS viewport and naturally selects these layouts. */
@media(max-width:1180px){
  .marketing-page .hero{grid-template-columns:1fr;min-height:auto}.marketing-page .hero-copy{text-align:center;max-width:760px;margin:auto}.marketing-page .eyebrow,.marketing-page .hero-actions,.marketing-page .trust{justify-content:center}.marketing-page .hero-product{min-height:560px}
  .auth-page main{grid-template-columns:minmax(0,1.05fr) minmax(460px,.95fr)}.auth-page .auth-copy{padding-inline:44px}.auth-page .auth-card{width:min(520px,calc(100% - 40px));margin-inline:auto}
  .workspace-page .sidebar{width:82px;padding-inline:12px}.workspace-page .sidebar .brand{justify-content:center}.workspace-page .sidebar .brand b,.workspace-page .nav-item span,.workspace-page .side-bottom button>span,.workspace-page .profile div{display:none}.workspace-page .nav-item,.workspace-page .side-bottom button{justify-content:center;padding-inline:8px}.workspace-page .nav-item em{position:absolute;right:5px;top:5px}.workspace-page main{margin-left:82px}.workspace-page .toast{left:calc(50% + 41px)}
  .workspace-page .course-library{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-page .video-work-grid{grid-template-columns:1fr}.workspace-page .video-guide{display:grid;grid-template-columns:minmax(160px,.55fr) 1fr;gap:20px}
}
@media(max-width:900px){
  .marketing-page .nav-links{display:none}.marketing-page .menu-btn{display:block}.marketing-page .hero-product{transform:scale(.88);margin-inline:0;max-width:100%;overflow:clip}.marketing-page .steps{grid-template-columns:1fr}.marketing-page .feature-grid{grid-template-columns:1fr}.marketing-page .feature-wide{grid-column:auto}.marketing-page .stories{grid-template-columns:1fr}.marketing-page .cta-section{grid-template-columns:1fr;text-align:center}
  .auth-page main{grid-template-columns:1fr}.auth-page .auth-copy{min-height:430px;padding:105px 28px 70px}.auth-page .auth-copy h1{font-size:clamp(2.55rem,8vw,3.7rem)}.auth-page .mini-app,.auth-page .auth-proof{display:none}.auth-page .auth-card{margin:-36px auto 50px;position:relative;z-index:2}
  .workspace-page .today-grid{grid-template-columns:1fr}.workspace-page .right-column{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-page .tip-card{grid-column:1/-1}.workspace-page .flash-stage{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-page .billing-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .legal-page main{grid-template-columns:1fr;gap:42px}.legal-page aside{position:static}.legal-page aside nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:650px){
  html{scroll-padding-top:76px}
  .marketing-page .container{width:min(100% - 28px,1240px)}.marketing-page .nav{height:70px}.marketing-page .nav-actions{display:none}.marketing-page h1{font-size:clamp(2.45rem,12vw,3.35rem)}.marketing-page .hero{padding-block:55px}.marketing-page .hero-actions{flex-direction:column;align-items:stretch}.marketing-page .hero-actions button{width:100%}.marketing-page .hero-product{transform:scale(.66);margin:-95px -155px}.marketing-page .feature-grid article{padding:24px}.marketing-page .feature-wide{display:block}.marketing-page .doc-demo{margin-top:28px}.marketing-page .cta-section{padding:42px 22px}.marketing-page .footer{grid-template-columns:1fr;text-align:center}.marketing-page .footer>*{justify-self:center}
  .auth-page>.brand{left:20px;top:20px;color:white}.auth-page .auth-copy{min-height:390px}.auth-page .auth-card{width:min(100% - 28px,480px);padding:26px 22px}.auth-page .auth-copy h1{font-size:2.55rem}
  .workspace-page .sidebar{display:flex!important;width:min(286px,86vw)!important;transform:translateX(-105%);transition:transform .25s var(--n-ease);box-shadow:22px 0 55px rgba(3,40,33,.24);padding:27px 18px}.workspace-page .sidebar.open{transform:none}.workspace-page .sidebar .brand{justify-content:flex-start}.workspace-page .sidebar .brand b,.workspace-page .nav-item span,.workspace-page .side-bottom button>span,.workspace-page .profile div{display:flex}.workspace-page .nav-item,.workspace-page .side-bottom button{justify-content:flex-start;padding:12px 14px}.workspace-page .nav-item em{position:static;margin-left:auto}.workspace-page main{margin-left:0}.workspace-page .topbar{height:70px;display:grid;grid-template-columns:34px minmax(0,1fr);padding:0 116px 0 14px;gap:8px}.workspace-page .mobile-menu{display:block;width:34px;padding:0}.workspace-page .crumb{overflow:hidden;white-space:nowrap}.workspace-page .crumb span{display:none}.workspace-page .crumb span:after{display:none}.workspace-page .top-actions{position:absolute;right:14px;top:13px;gap:7px}.workspace-page .top-actions .icon-btn,.workspace-page .top-actions .new-btn{width:44px;height:44px;min-height:44px;padding:0;font-size:0}.workspace-page .top-actions .icon-btn:before{content:"◉";font-size:18px}.workspace-page .top-actions .new-btn:before{content:"+";font-size:22px}.workspace-page .view{padding:30px 16px 64px}.workspace-page .welcome{display:block}.workspace-page .welcome h1{font-size:clamp(1.8rem,8vw,2.25rem)}.workspace-page .streak{width:max-content;max-width:100%;margin-top:17px}.workspace-page .right-column,.workspace-page .course-cards,.workspace-page .course-library,.workspace-page .flash-stage,.workspace-page .video-balance-grid{grid-template-columns:1fr}.workspace-page .tip-card{grid-column:auto}.workspace-page .section-title{align-items:flex-start;gap:12px}.workspace-page .section-title button{flex:none}.workspace-page .course-hero{align-items:flex-start;flex-wrap:wrap}.workspace-page .course-hero .new-btn{width:100%;margin-left:0}.workspace-page .material-drop{align-items:flex-start;flex-wrap:wrap}.workspace-page .material-drop button{width:100%;margin-left:0}.workspace-page .key-term{grid-template-columns:1fr;gap:5px}.workspace-page .review-card{height:min(330px,58vh)}.workspace-page .review-actions{display:grid;grid-template-columns:1fr}.workspace-page .review-actions button{width:100%}.workspace-page .video-guide{display:block}.workspace-page .video-row,.workspace-page .sample-video{grid-template-columns:58px minmax(0,1fr)}.workspace-page .video-row-actions,.workspace-page .sample-video em{grid-column:2;justify-self:start}.workspace-page .billing-status-modal{width:100%}.workspace-page .billing-plan-grid{grid-template-columns:1fr}.workspace-page .billing-credit-offer{align-items:flex-start;flex-direction:column;gap:10px}.workspace-page .billing-credit-offer button{margin-left:0;width:100%}.workspace-page .billing-actions{flex-direction:column}.workspace-page .usage-grid{grid-template-columns:1fr}.workspace-page .toast{left:50%;width:max-content;max-width:calc(100vw - 30px);text-align:center}.workspace-page .verification-banner{margin:12px 14px 0;align-items:flex-start}.workspace-page .verification-banner span{font-size:.75rem}.workspace-page .verification-banner button{flex:none}
  .legal-page>header{height:auto;min-height:72px;padding:12px 16px}.legal-page .header-actions{gap:10px}.legal-page .header-actions label{font-size:0}.legal-page main{width:min(100% - 28px,700px);padding-top:40px}.legal-page aside nav{grid-template-columns:1fr 1fr}.legal-page article section{padding-bottom:44px;margin-bottom:44px}.legal-page .contact-actions{align-items:stretch}.legal-page .contact-actions a{text-align:center}.legal-page footer{gap:18px}
  .video-page .lesson-shell{padding:10px}.video-page .lesson-shell>header span{display:none}.video-page .player{border-radius:10px;aspect-ratio:auto;min-height:560px}.video-page .scene{padding-inline:6%!important}.video-page .controls{gap:10px;padding-inline:12px}.video-page .controls button{font-size:.72rem}
  .workspace-page .topbar,.workspace-page .modal,.marketing-page .modal{backdrop-filter:none;-webkit-backdrop-filter:none}.workspace-page .sidebar{will-change:transform}
}
@media(max-width:420px){
  .marketing-page .hero-product{transform:scale(.58);margin:-120px -190px}.marketing-page .trust{align-items:flex-start}.marketing-page .logo-strip div{gap:20px}
  .auth-page .auth-copy{padding-inline:20px}.auth-page .auth-card{width:calc(100% - 20px);padding-inline:18px}
  .workspace-page .view{padding-inline:12px}.workspace-page .task{padding:13px 12px}.workspace-page .task-time{display:none}.workspace-page .page-heading .new-btn{width:100%}.workspace-page .modal{padding:8px}.workspace-page .modal-box{max-height:96vh;padding:22px 18px;border-radius:13px}.workspace-page .usage-grid article{min-height:112px}.workspace-page .verification-banner{flex-direction:column}.workspace-page .verification-banner button{width:100%}
  .legal-page .brand b{font-size:1rem}.legal-page .header-actions>a{display:none}.legal-page aside nav{grid-template-columns:1fr}.legal-page .intro{padding:23px 19px}.legal-page p,.legal-page li{font-size:.9rem}
}

/* Premium interaction pass — quieter surfaces, deliberate feedback, fewer novelty effects. */
:root{
  --n-lime:#d9e878;
  --n-lime-hover:#cfdf6c;
  --n-line:#d7ddd8;
  --n-shadow-sm:0 1px 2px rgba(7,49,41,.04),0 8px 22px rgba(7,49,41,.045);
  --n-shadow-md:0 2px 4px rgba(7,49,41,.04),0 16px 34px rgba(7,49,41,.07);
  --n-shadow-lg:0 3px 8px rgba(7,49,41,.05),0 28px 64px rgba(7,49,41,.10);
}
body{letter-spacing:-.006em}
.noise{opacity:.012}
.marketing-page button,.auth-page button,.workspace-page button,.video-page button{
  transition:background-color .16s var(--n-ease),border-color .16s var(--n-ease),color .16s var(--n-ease),box-shadow .16s var(--n-ease),opacity .16s var(--n-ease);
}
.marketing-page button:not(:disabled):active,.auth-page button:not(:disabled):active,.workspace-page button:not(:disabled):active,.video-page button:not(:disabled):active{transform:translateY(1px)}
.marketing-page .primary:not(:disabled):hover,.workspace-page .new-btn:not(:disabled):hover,.auth-page .submit:not(:disabled):hover{transform:none;box-shadow:0 6px 18px rgba(7,49,41,.12)}
.marketing-page .primary:after{display:none}
.marketing-page .step,.marketing-page .feature-grid article,.marketing-page .story-card{transition:border-color .18s var(--n-ease),box-shadow .18s var(--n-ease),background-color .18s var(--n-ease)}
.marketing-page .step:hover,.marketing-page .feature-grid article:hover,.marketing-page .story-card:hover{transform:none}
.marketing-page .app-shell{transform:none;border-radius:12px;box-shadow:var(--n-shadow-lg)}
.marketing-page .float-card{border:1px solid rgba(7,63,53,.10);border-radius:9px;box-shadow:var(--n-shadow-md)}
.marketing-page .cta-section{background:#e5ead5;border:1px solid #d5ddc0}
.marketing-page .step-visual,.marketing-page .feature-grid article,.marketing-page .story-card{border-radius:12px}
.marketing-page .nav-wrap{box-shadow:0 1px 0 rgba(7,63,53,.05)}
.marketing-page .nav-links a:after{bottom:-9px;height:1px}

.auth-page .auth-card{border-radius:12px;box-shadow:var(--n-shadow-lg)}
.auth-page .mini-app{box-shadow:var(--n-shadow-md)}
.auth-page .submit{background:var(--n-forest);color:#fff;border:1px solid var(--n-forest)}
.auth-page .submit span{color:var(--n-lime)}
.auth-page .tabs button.active{border-color:#ccd5cf;background:#fff;box-shadow:0 1px 2px rgba(7,49,41,.05)}

.workspace-page{background:#f5f4ee}
.workspace-page .topbar{background:rgba(248,247,242,.94);border-color:#dfe3de}
.workspace-page .new-btn{background:var(--n-forest);border-color:var(--n-forest);color:#fff;box-shadow:none}
.workspace-page .new-btn:hover{background:var(--n-forest-deep);border-color:var(--n-forest-deep)}
.workspace-page .soft-button,.workspace-page .icon-btn{background:#fff;border-color:#cfd7d1;box-shadow:none}
.workspace-page .soft-button:hover,.workspace-page .icon-btn:hover{background:#f4f6f3;border-color:#aebdb4}
.workspace-page .nav-item:hover{transform:none;background:rgba(255,255,255,.075)}
.workspace-page .nav-item.active{background:rgba(255,255,255,.095)}
.workspace-page .nav-item.active:before{width:2px;background:#dbe58e}
.workspace-page .streak{border-radius:9px;background:#f8f5e9;border-color:#e0dccb}
.workspace-page .streak:hover{transform:none;box-shadow:none}
.workspace-page .task,.workspace-page .course-card,.workspace-page .card,.workspace-page .library-card,.workspace-page .material-item,.workspace-page .generated-note,.workspace-page .mini-flash,.workspace-page .video-balance-card,.workspace-page .credit-balance-card,.workspace-page .video-panel,.workspace-page .video-guide{
  border-radius:10px;box-shadow:none;transition:border-color .16s var(--n-ease),background-color .16s var(--n-ease),box-shadow .16s var(--n-ease);
}
.workspace-page .task:hover{transform:none;border-color:#aebcb4;background:#fff}
.workspace-page .course-card:hover,.workspace-page .card:hover,.workspace-page .library-card:hover,.workspace-page .mini-flash:hover{transform:none;border-color:#aebcb4;box-shadow:0 4px 16px rgba(7,49,41,.055)}
.workspace-page .tip-card{border-radius:10px;background:#e6ebd6;border:1px solid #d7dfc3}
.workspace-page .modal{background:rgba(8,27,22,.52)}
.workspace-page .modal-box{border:1px solid rgba(7,49,41,.10);border-radius:12px;box-shadow:var(--n-shadow-lg)}
.workspace-page .modal.open .modal-box{animation:n-dialog-in .18s var(--n-ease)}
.workspace-page .modal-close{transition:background-color .15s,color .15s,transform .15s}
.workspace-page .modal-close:hover{background:#e3e7e1;color:#0b3d33;transform:rotate(0)}
.workspace-page .billing-plan-card{border-radius:9px;background:#fff}
.workspace-page .billing-plan-card.current{background:#f2f4ea;box-shadow:inset 0 0 0 1px var(--n-forest)}
.workspace-page .billing-plan-card.current em{background:var(--n-forest)}
.workspace-page .billing-safety{border-radius:9px;background:#f5f6f0}
.workspace-page .toast{border:1px solid rgba(255,255,255,.12);border-radius:8px;box-shadow:0 12px 30px rgba(3,29,24,.18)}
.workspace-page button:disabled,.auth-page button:disabled,.marketing-page button:disabled{cursor:not-allowed;filter:saturate(.65);opacity:.52}
.workspace-page input:focus,.workspace-page select:focus,.workspace-page textarea:focus,.auth-page input:focus,.auth-page select:focus{outline:0;border-color:#648176;box-shadow:0 0 0 3px rgba(23,98,83,.09)}
@keyframes n-dialog-in{from{opacity:0;transform:translateY(6px) scale(.992)}to{opacity:1;transform:none}}

.legal-page .intro{border-radius:10px;box-shadow:none}
.legal-page .primary{background:var(--n-forest);border-radius:7px}
.video-page .player{border-radius:12px;box-shadow:var(--n-shadow-lg)}

@media(hover:none){
  .marketing-page .step:hover,.marketing-page .feature-grid article:hover,.marketing-page .story-card:hover,.workspace-page .task:hover,.workspace-page .course-card:hover,.workspace-page .card:hover,.workspace-page .library-card:hover,.workspace-page .mini-flash:hover{box-shadow:none;transform:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media(forced-colors:active){
  button,a,input,select,textarea{forced-color-adjust:auto}
}