:root{--navy:#12264b;--blue:#075cc8;--light:#f5f8fc;--muted:#62728a;--line:#dce5f0}*{box-sizing:border-box}body{margin:0;background:#f7f9fd;color:var(--navy);font-family:Arial,Helvetica,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ebaf23;outline-offset:2px}.app-shell{min-height:100vh}.header{background:#fff;justify-content:space-between;padding:8px max(3vw,20px);border-bottom:1px solid var(--line);gap:18px}.brand,.header{display:flex;align-items:center}.brand{border:0;background:#101522;border-radius:12px;width:191px;height:66px;justify-content:center;padding:9px}.brand img{max-width:100%;max-height:100%;object-fit:contain}.top-nav{display:flex;gap:20px}.small-plain,.top-nav button{color:#334766;background:none;border:0;font-weight:700}.small-plain:hover,.top-nav button:hover{color:var(--blue)}.trial-pill{border-radius:28px;padding:10px 15px;color:#7e5205;background:#fff5df;font-size:13px;font-weight:700}.layout{max-width:1220px;margin:auto;padding:42px 26px}.narrow{max-width:1160px}.eyebrow{font-size:12px;letter-spacing:.17em;color:#0a70ce;font-weight:900}.welcome{display:grid;grid-template-columns:1fr 1fr;align-items:center;grid-gap:55px;gap:55px;min-height:77vh}.welcome h1{font-size:clamp(47px,5vw,78px);letter-spacing:-.05em;line-height:1.05;margin:20px 0}.welcome h1 span{color:#0870d7}.lead{font-size:20px;line-height:1.65;color:#556780;max-width:550px}.welcome-actions{display:flex;flex-wrap:wrap;gap:13px;margin:30px 0 18px}.primary{background:linear-gradient(130deg,#0784df,#0954c3);color:white;border:0;border-radius:10px;padding:13px 20px;font-weight:800;box-shadow:0 5px 13px #0651b321}.secondary{background:white;color:#125aa9;border:1px solid #bed1e5;border-radius:10px;padding:12px 18px;font-weight:800}.large{padding:17px 23px}.hint,.muted{color:var(--muted);line-height:1.5}.hint{font-size:13px}.welcome-preview{background:#fff;border:1px solid #d1dce9;box-shadow:0 24px 58px #1a386220;padding:18px;border-radius:24px;transform:rotate(1.4deg)}.mock-title{text-align:center;padding:10px;font-weight:800}.preview-output,.writing-area{background:#e5f3ff;border:3px solid #72a8e4;border-radius:10px;padding:16px;min-height:100px;font-size:26px;font-weight:700}.caret{color:#0876d6}.fixed-keys,.preview-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:5px;gap:5px;margin:8px 0}.fixed-keys button,.preview-actions span{text-align:center;padding:18px 7px;background:#106ac8;color:white;border:0;border-radius:8px;font-weight:800}.action-back,.preview-actions span:nth-child(3){background:#64778a!important}.action-enter,.preview-actions span:nth-child(4){background:#17966c!important}.key-grid,.preview-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-gap:5px;gap:5px}.preview-grid span{padding:15px 0;text-align:center;background:#e8f3ff;font-weight:900;font-size:24px;border-radius:7px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:26px}.section-head h1,h1{margin:8px 0;font-size:35px}.section-head p{margin:7px 0}.student-cards{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:17px;gap:17px}.add-card,.student-card{background:#fff;min-height:132px;border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;text-align:left;gap:19px;padding:23px;color:var(--navy);box-shadow:0 5px 15px #133b7410}.add-card:hover,.student-card:hover{border-color:#398de9}.avatar{background:#dcebff;color:#0d61c8;font-size:28px;font-weight:900;width:68px;height:68px;border-radius:18px;display:grid;place-items:center}.add-card small,.add-card strong,.student-card small,.student-card strong{display:block}.student-card strong{font-size:20px;margin-bottom:9px}.add-card small,.student-card small{color:var(--muted)}.card-arrow{margin-left:auto;font-size:30px;color:#0b69cb}.add-card{flex-direction:column;align-items:flex-start;justify-content:center;color:#1463b6;border-style:dashed}.info-banner{margin-top:22px;padding:20px;background:#e9f3ff;border-radius:14px;color:#285a8b}.library{display:grid;grid-template-columns:175px 1fr;grid-gap:22px;gap:22px}.filters{background:white;border:1px solid var(--line);padding:13px;border-radius:15px;display:flex;flex-direction:column;gap:7px;align-self:start}.filters button{background:transparent;text-align:left;border:0;border-radius:9px;padding:12px;color:#49617b;font-weight:700}.filters button.selected{background:#dceeff;color:#0661c7}.board-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:14px;gap:14px}.board-card{border:1px solid #e0e8f1;border-radius:15px;padding:17px;min-height:198px;display:flex;flex-direction:column}.board-card.blue{background:#e4f2ff}.board-card.yellow{background:#fff4d3}.board-card.green{background:#ddf8e9}.board-card.rose{background:#ffe7ef}.board-card.purple{background:#eee6ff}.board-card-top{display:flex;justify-content:space-between;align-items:flex-start}.board-card input{width:21px;height:21px;accent-color:#0969d5}.board-symbol{font-size:34px;font-weight:900;color:#074e96}.board-card h3{margin:13px 0 4px;font-size:16px}.board-card p{margin:0;color:#59677a;font-size:13px}.board-card-foot{display:flex;gap:8px;margin-top:auto;padding-top:16px}.board-card-foot button{border:1px solid #c1d5e5;background:#fff;border-radius:8px;padding:8px 10px;font-size:12px;font-weight:800;color:#095bbb}.board-card-foot .add-toggle{margin-left:auto}.sticky-summary{position:-webkit-sticky;position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;margin-top:25px;padding:15px 18px;box-shadow:0 -5px 25px #17395e14}.board-screen{max-width:1100px;margin:18px auto;padding:0 13px 22px}.board-heading{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:12px 4px}.board-heading select,.settings-panel input,.settings-panel select{border:1px solid #b8cee5;border-radius:9px;background:#fff;padding:10px;max-width:260px}.board-toolrow{display:flex;gap:6px;margin:9px 0;flex-wrap:wrap}.board-toolrow button{background:white;border:1px solid #c9d8e8;border-radius:8px;padding:10px 16px;font-weight:750;color:#385571}.writing-area{width:100%;height:145px;resize:vertical;display:block;color:#11233f}.fixed-keys button{font-size:clamp(11px,1.5vw,17px);min-height:64px}.key-grid{background:white;padding:8px;border-radius:12px;border:1px solid #d9e2ee}.key{background:#dceeff;border:solid #a3c8ec;border-width:2px 2px 4px;border-radius:9px;min-height:clamp(51px,7vh,80px);font-size:clamp(20px,3vw,34px);font-weight:900;color:#173968;overflow:hidden;overflow-wrap:anywhere}.key.yellow{background:#fff1bf;border-color:#eddca2}.key.green{background:#dff6e6;border-color:#b7e2c6}.key.purple{background:#efe4ff;border-color:#d5bcef}.key.rose{background:#ffe5ef;border-color:#f5bfd4}.key:active{transform:translateY(2px);border-bottom-width:2px}.key-grid.tamil .key{font-size:clamp(19px,3vw,30px)}.pending{grid-column:1/-1;text-align:center;padding:5px;background:#fff3c2;border-radius:7px}.board-footer{font-size:12px;color:#718095;text-align:center;margin-top:12px}.saved-list,.settings-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:23px}.saved-item{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:16px 0}.saved-item:last-child{border:0}.saved-item small{display:block;color:var(--muted);margin-top:7px}.empty{color:var(--muted);padding:35px;text-align:center}.settings-panel{max-width:680px}.settings-panel label{display:flex;flex-direction:column;gap:8px;margin:18px 0;font-weight:700}.settings-panel p{line-height:1.7;color:#52647d}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#142a49;color:white;padding:14px 22px;border-radius:12px;box-shadow:0 10px 30px #0003;z-index:5}.loading{padding:25vh 20px;text-align:center;font-size:22px}@media(max-width:820px){.header{flex-wrap:wrap}.top-nav{order:3;width:100%;justify-content:space-between;gap:4px;overflow:auto}.top-nav button{font-size:12px}.welcome{grid-template-columns:1fr;min-height:0}.welcome-preview{transform:none}.board-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.library{grid-template-columns:1fr}.filters{flex-direction:row;overflow:auto}.filters button{white-space:nowrap}.student-cards{grid-template-columns:1fr}.trial-pill{font-size:11px}.section-head{align-items:flex-start;flex-direction:column}.board-heading{flex-wrap:wrap}.fixed-keys,.key-grid{gap:3px}.fixed-keys button{padding:12px 2px;min-height:55px}}@media(max-width:430px){.layout{padding:25px 14px}.brand{width:140px;height:55px}.trial-pill{padding:7px}.board-cards{grid-template-columns:1fr 1fr;gap:9px}.board-card{padding:11px}.board-card-foot{flex-wrap:wrap}.key{min-height:51px}.board-toolrow button{font-size:12px;padding:8px}.welcome h1{font-size:50px}.sticky-summary{font-size:12px}}.octo-showcase{width:100%;max-width:560px;margin-inline:auto;padding:18px 20px 15px;border:1px solid #d8e4f3;border-radius:24px;background:linear-gradient(160deg,#fff,#f1f6ff);box-shadow:0 20px 65px #1233651c;text-align:center}.octo-showcase-heading{margin-bottom:12px}.octo-showcase-kicker{font-size:10px;font-weight:900;letter-spacing:.14em;color:#0067d5}.octo-showcase h2{font-size:24px;margin:6px 0 2px;color:#102d5b}.octo-showcase-heading p{font-size:13px;color:#64758d;margin:0}.octo-device{position:relative;margin:0 auto;background:#131922;border:7px solid #242c39;border-radius:27px;padding:13px 11px;max-width:345px;box-shadow:0 14px 28px #111d3f40,inset 0 0 0 1px #4a5365}.octo-camera{position:absolute;z-index:3;top:8px;left:50%;transform:translateX(-50%);width:5px;height:5px;background:#486381;border-radius:50%}.octo-device-screen{position:relative;aspect-ratio:3/4;overflow:hidden;background:#f4f6f8;border-radius:12px}.octo-photo{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .65s ease,visibility .65s ease}.octo-photo.is-active{opacity:1;visibility:visible;z-index:1}.octo-photo img{width:100%;height:100%;object-fit:contain;display:block}.octo-slide-text{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:12px;color:#536983;font-size:12px;min-height:32px}.octo-slide-text strong{font-size:18px;color:#105fb6}.octo-player-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}.octo-player-controls button{cursor:pointer}.octo-player-arrow{width:30px;height:30px;border:1px solid #cad9ee;border-radius:50%;background:white;color:#0a5cbd;font-size:24px;line-height:1}.octo-progress{display:flex;gap:6px;align-items:center}.octo-progress-dot{width:9px;height:9px;padding:0;background:#b6c7dc;border:none;border-radius:50%;transition:width .2s,background .2s}.octo-progress-dot.active{width:26px;border-radius:8px;background:#096cce}.octo-play-toggle{background:#edf4ff;border:1px solid #cddff2;color:#0955a6;border-radius:9px;font-size:12px;padding:7px 9px;font-weight:700}.octo-caption{margin-top:10px;color:#76849a;font-size:11px}@media(max-width:820px){.octo-showcase{max-width:520px}.octo-device{max-width:320px}}@media(max-width:420px){.octo-showcase{padding:15px 9px}.octo-device{max-width:285px}.octo-showcase h2{font-size:21px}}@media(prefers-reduced-motion:reduce){.octo-photo,.octo-progress-dot{transition:none}}