@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Inter:wght@400;600;800&display=swap");:root{color-scheme:light;--bg:#fff;--accent:#0f172a;--text:#0f172a;--muted:#6b7280;--tile:#f3f4f6;--content-scale:1vmin}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-moz-user-select:none;user-select:none;-webkit-user-select:none}body,main.page{min-height:100vh}main.page{width:100%;padding:clamp(6px,2.4vw,24px);display:flex;flex-direction:column;gap:clamp(12px,2vh,28px)}@media (max-width:720px){main.page{padding:clamp(6px,1.8vw,16px);gap:clamp(10px,1.6vh,20px)}}.header-controls,.menu-launcher{display:flex;justify-content:flex-end;width:100%}.header-controls{align-items:center;gap:clamp(8px,1.6vw,14px)}.menu-button{border:1px solid #e2e8f0;background:#f8fafc;color:#0f172a;border-radius:14px;width:clamp(46px,8vw,66px);height:clamp(46px,8vw,66px);font-size:clamp(20px,3vw,26px);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}.menu-button:focus-visible,.menu-button:hover{outline:none;border-color:#cbd5e1;box-shadow:0 10px 18px rgba(15,23,42,.14);transform:translateY(-1px)}.fullscreen-button{border:1px solid #e2e8f0;background:#eef2ff;color:#0f172a;border-radius:14px;min-width:clamp(180px,30vw,240px);min-height:clamp(46px,8vw,66px);padding:clamp(10px,2vw,14px) clamp(14px,3vw,18px);font-size:clamp(14px,2.6vw,16px);font-weight:600;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease,background-color .12s ease}.fullscreen-button.is-active{background:#e0f2fe;border-color:#bae6fd}.fullscreen-button:focus-visible,.fullscreen-button:hover{outline:none;border-color:#cbd5e1;box-shadow:0 10px 18px rgba(15,23,42,.14);transform:translateY(-1px)}.menu-fullscreen{width:100%;margin-bottom:clamp(12px,2vw,16px)}.numbers-page,.page-alphabet{min-height:100vh;display:flex;flex-direction:column}.numbers-page>.word-banner,.page-alphabet>.word-banner{flex-grow:0;flex-shrink:0;flex-basis:calc(100vh / 7.5);min-height:calc(100vh / 7.5);max-height:calc(100vh / 6.5)}.numbers-page>.manual-sequence,.numbers-page>.numbers-grid,.page-alphabet>.alphabet-layout{flex:1 1 auto}.control-bar{display:grid;grid-template-columns:minmax(110px,1fr) minmax(160px,2fr) minmax(110px,1fr) minmax(68px,1fr);grid-gap:clamp(8px,2vw,18px);gap:clamp(8px,2vw,18px);align-items:stretch;overflow-x:auto;scrollbar-width:thin}@media (max-width:720px){.control-bar{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:540px){.control-bar{display:flex;flex-wrap:nowrap;gap:clamp(6px,2vw,12px);padding-bottom:6px;scroll-snap-type:x mandatory}.control-bar .control-card,.control-card.flags{flex:0 0 clamp(120px,32vw,180px);min-height:clamp(44px,12vw,70px);scroll-snap-align:start}.control-card.flags{min-width:clamp(180px,52vw,260px)}.control-card.mute{flex:0 0 clamp(64px,18vw,90px)}}.control-card{border-radius:16px;border:1px solid #e2e8f0;background:#f8fafc;font-size:clamp(16px,3vw,24px);font-weight:700;color:var(--accent);display:flex;align-items:center;justify-content:center;padding:clamp(10px,1.8vw,16px);text-decoration:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.control-card.is-active,.control-card:focus-visible,.control-card:hover{border-color:#94a3b8;box-shadow:0 12px 24px rgba(15,23,42,.15);transform:translateY(-1px);outline:none}.control-card:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.home-page{gap:clamp(14px,2.2vh,32px)}.home-hero{background:linear-gradient(135deg,#eef2ff,#e0f2fe);border-radius:24px;padding:clamp(18px,3vw,26px) clamp(18px,3vw,28px);display:grid;grid-gap:clamp(10px,2vw,18px);gap:clamp(10px,2vw,18px);box-shadow:0 12px 28px rgba(15,23,42,.08)}.home-kicker{text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:clamp(12px,2vw,14px);color:#0f172a;margin:0}.home-hero h1{font-size:clamp(28px,6vw,44px);margin:0}.home-actions{display:flex;gap:clamp(10px,1.6vw,16px);flex-wrap:wrap}.control-card.secondary{background:#fff}.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-gap:clamp(12px,2vw,18px);gap:clamp(12px,2vw,18px)}.home-card{border:1px solid #e2e8f0;background:#fff;border-radius:18px;padding:clamp(14px,2.4vw,18px);display:grid;grid-template-columns:auto 1fr;grid-gap:clamp(10px,2vw,14px);gap:clamp(10px,2vw,14px);align-items:center;text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.home-card:focus-visible,.home-card:hover{border-color:#94a3b8;box-shadow:0 12px 24px rgba(15,23,42,.12);transform:translateY(-2px);outline:none}.home-card-emoji{width:clamp(42px,8vw,54px);height:clamp(42px,8vw,54px);border-radius:14px;background:#f8fafc;display:grid;place-items:center;font-size:clamp(22px,4vw,28px)}.home-card-content h2{margin:0;font-size:clamp(18px,3.6vw,22px)}.home-card-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.home-card-menu{font-size:clamp(18px,3.6vw,22px);color:var(--muted)}.home-card-content p{margin:4px 0 0;color:var(--muted);font-size:clamp(14px,3vw,16px);line-height:1.5}.control-card.flags{display:flex;justify-content:space-between;gap:clamp(4px,1.2vw,10px)}.control-card.mute{aspect-ratio:1/1}.control-card.mute,.flag{font-size:clamp(20px,3vw,32px)}.flag{flex:1 1;border:none;background:transparent;cursor:pointer;transition:transform .1s ease}.flag.selected{transform:scale(1.1)}.grid{display:grid;flex:1 1;width:100%;height:100%;--tile-min-width:clamp(82px,calc(100vw / 8),180px);grid-template-columns:repeat(auto-fill,minmax(var(--tile-min-width),1fr));grid-gap:clamp(6px,1vw,16px);gap:clamp(6px,1vw,16px);align-content:stretch;grid-auto-flow:dense}@media (min-width:500px) and (min-height:500px){.numbers-page>.word-banner,.page-alphabet>.word-banner{flex:0 0 auto;min-height:clamp(72px,16vh,140px);max-height:clamp(96px,20vh,180px);height:auto}.grid{--tile-min-width:clamp(68px,10vw,140px);grid-template-columns:repeat(auto-fit,minmax(var(--tile-min-width),1fr));align-content:start}}.alphabet-layout{flex:1 1 auto;width:100%}.tile{padding:clamp(10px,2vw,18px);font-size:clamp(24px,4vmin,40px);font-weight:800;border:1px solid #e5e7eb;border-radius:16px;background:var(--tile);color:var(--accent);display:inline-flex;justify-content:center;line-height:1.1;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;box-shadow:0 10px 22px rgba(15,23,42,.08);aspect-ratio:1/1}.letter-lockup,.tile{align-items:flex-end;gap:0}.letter-lockup{display:flex}.tile:focus-visible,.tile:hover{transform:translateY(-2px) scale(1.01);border-color:#cbd5e1;box-shadow:0 12px 24px rgba(15,23,42,.08);outline:none}.tile:active{transform:translateY(0)}.tile:disabled{cursor:not-allowed;opacity:.5}.letter-main{font-size:clamp(42px,12vmin,90px);color:#7c3aed}.letter-vowel{color:#fb923c}.letter-consonant{color:#7c3aed}.letter-script{font-family:Caveat,Comic Sans MS,Bradley Hand,cursive;font-size:clamp(34px,10vmin,72px);color:#16a34a;line-height:1;margin-top:0;align-self:flex-end}.word-french{font-size:clamp(15px,5vw,55px);font-weight:800;margin:0;display:inline-flex;gap:6px;flex-wrap:wrap;max-width:100%;min-width:0;white-space:normal}.word-french-letter{color:#7c3aed}.word-french-vowel{color:#fb923c}.word-translation{margin:0;font-size:clamp(12px,4vw,44px);font-weight:700;color:#fde047;display:inline-flex;gap:4px;flex-wrap:wrap;max-width:100%;min-width:0;white-space:normal}.word-size-xxl{font-size:clamp(22px,6vw,64px)}.word-size-xl{font-size:clamp(20px,5.4vw,56px)}.word-size-lg{font-size:clamp(18px,4.8vw,48px)}.word-size-md{font-size:clamp(16px,4.2vw,40px)}.word-size-sm{font-size:clamp(14px,3.6vw,34px)}.word-translation-letter{background:linear-gradient(120deg,#7c3aed,#facc15);-webkit-background-clip:text;background-clip:text}.word-translation-letter,.word-translation-vowel{-webkit-text-fill-color:transparent;color:transparent}.word-translation-vowel{background:linear-gradient(120deg,#facc15,#fb923c);-webkit-background-clip:text;background-clip:text}.word-banner{width:100%;border-radius:20px;background:var(--tile);display:flex;align-items:center;gap:clamp(10px,1.6vw,22px);padding:clamp(10px,2.4vw,22px);box-shadow:0 16px 30px rgba(15,23,42,.1);text-align:left;flex-wrap:wrap}.alphabet-header{width:100%;display:grid;grid-template-columns:1fr auto;align-items:flex-start;justify-content:space-between;grid-gap:clamp(12px,2vw,24px);gap:clamp(12px,2vw,24px);position:-webkit-sticky;position:sticky;top:clamp(6px,2.4vw,24px);background:linear-gradient(180deg,hsla(0,0%,100%,.98),hsla(0,0%,100%,.9));padding:clamp(10px,2vw,18px);border-radius:18px;z-index:12}.alphabet-header .menu-launcher{flex:0 0 auto}.alphabet-header .word-display{flex:1 1 auto}.word-banner-column{display:flex;flex-direction:row;gap:clamp(8px,1.4vw,16px);flex-wrap:nowrap;align-items:stretch}.word-banner-card{min-width:clamp(72px,22vw,140px);min-height:clamp(50px,7vw,78px);display:flex;align-items:center;justify-content:center;font-size:clamp(16px,4vw,26px)}.word-toggle-card{text-transform:uppercase}.word-toggle-card.is-disabled,.word-toggle-card.is-disabled-blue{background:#e2e8f0;border-color:#cbd5e1;color:#1e3a8a}.word-toggle-card.is-disabled-blue{background:#dbeafe;color:#1d4ed8}.word-toggle-card.is-disabled span[aria-hidden=true],.word-toggle-card.is-disabled-blue span[aria-hidden=true]{text-decoration:line-through}.word-info{flex:1 1 320px;display:flex;align-items:center;gap:clamp(12px,2vw,32px);flex-wrap:wrap;width:100%}.word-display{flex:1 1 340px;justify-content:flex-start;gap:clamp(8px,1.6vw,18px);min-height:clamp(42px,8vw,90px)}.word-display,.word-line{display:flex;align-items:flex-start;min-width:0;overflow:hidden}.word-line{gap:clamp(6px,1.4vw,16px);flex-wrap:wrap}.word-definition{background:#f8fafc;border-left:4px solid #22c55e;border-radius:10px;padding:clamp(6px,1.2vw,12px) clamp(10px,1.6vw,16px);color:#0f172a;font-size:clamp(14px,3.4vw,18px);line-height:1.4;margin:0}.word-separator{display:inline-flex;align-self:flex-start;padding-inline:clamp(4px,1vw,10px);font-size:clamp(16px,4.2vw,40px);font-weight:800;color:#22c55e;line-height:1.1}.word-line.word-empty{min-height:clamp(48px,8vw,120px);visibility:hidden}.word-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:clamp(10px,2vw,24px);flex:1 1 240px;min-width:0}.word-flags{display:flex;gap:clamp(6px,1.6vw,16px);flex-wrap:wrap;flex:1 1 220px}.word-flags-inline{align-items:center;justify-content:flex-start;padding-block:clamp(4px,1vw,10px)}.word-flag{border:2px solid transparent;background:#f8fafc;border-radius:12px;font-size:clamp(22px,4vw,36px);padding:clamp(6px,1vw,10px);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 6px 18px rgba(15,23,42,.12)}.word-flag.selected{transform:translateY(-2px) scale(1.05);background:#facc15;border-color:#fbbf24;box-shadow:0 10px 24px rgba(251,191,36,.4)}.word-speaker{border:1px solid #cbd5e1;background:#fff;color:#0f172a;border-radius:14px;width:clamp(44px,8vw,76px);height:clamp(44px,8vw,76px);font-size:clamp(20px,3.2vw,32px);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}.word-speaker.is-muted{background:#f1f5f9;color:#94a3b8}.word-speaker:focus-visible,.word-speaker:hover{transform:translateY(-1px);border-color:#94a3b8;box-shadow:0 8px 16px rgba(15,23,42,.12);outline:none}.menu-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.35);display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,32px);z-index:20}.menu-modal{width:min(540px,94vw);background:#fff;border-radius:18px;border:1px solid #e2e8f0;padding:clamp(16px,3vw,28px);box-shadow:0 24px 60px rgba(15,23,42,.25);display:flex;flex-direction:column;gap:clamp(14px,2vw,20px)}.menu-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.menu-modal-header h2{font-size:clamp(18px,3.2vw,24px);margin:0}.menu-home-link{display:inline-flex;align-items:center;gap:10px;padding:clamp(8px,1.4vw,12px) clamp(12px,2vw,16px);border-radius:14px;border:1px solid #e2e8f0;background:linear-gradient(180deg,#fff,#f8fafc);color:inherit;text-decoration:none;box-shadow:0 10px 24px rgba(15,23,42,.12);font-weight:700}.menu-home-link:focus-visible,.menu-home-link:hover{background:#f8fafc;transform:translateY(-1px);box-shadow:0 14px 28px rgba(15,23,42,.14)}.menu-close{border:1px solid #e2e8f0;background:#f8fafc;color:#0f172a;border-radius:12px;width:clamp(38px,7vw,52px);height:clamp(38px,7vw,52px);font-size:clamp(18px,3vw,22px);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}.menu-close:focus-visible,.menu-close:hover{outline:none;border-color:#cbd5e1;box-shadow:0 10px 18px rgba(15,23,42,.14);transform:translateY(-1px)}.menu-modal-actions{display:flex;flex-direction:column;gap:clamp(10px,2vw,16px)}.menu-link{justify-content:flex-start;gap:12px;font-size:clamp(16px,3vw,20px)}.menu-link-emoji{display:inline-flex;align-items:center;justify-content:center;width:clamp(38px,7vw,46px);height:clamp(38px,7vw,46px);border-radius:12px;background:#f1f5f9}.menu-link-label{font-weight:700}.menu-flags{display:flex;flex-wrap:wrap;gap:clamp(8px,1.6vw,14px);justify-content:center}.menu-modal-actions .word-speaker{align-self:center}.exit-quiz-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:clamp(14px,3vw,32px);z-index:30}.exit-quiz{width:min(520px,96vw);background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:clamp(16px,3vw,28px);box-shadow:0 24px 60px rgba(15,23,42,.28);display:flex;flex-direction:column;gap:clamp(12px,2vw,18px)}.exit-quiz-header h2{margin:0 0 4px;font-size:clamp(18px,3.2vw,24px)}.exit-quiz-header p{margin:0;color:#475569;font-size:clamp(14px,2.6vw,16px)}.exit-quiz-form{display:flex;flex-direction:column;gap:clamp(10px,1.8vw,16px)}.exit-quiz-question{font-size:clamp(16px,3vw,20px);margin:0;display:flex;align-items:center;gap:6px}.exit-quiz-number{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;border-radius:12px;padding:6px 10px;background:#eef2ff;font-weight:700;color:#1d4ed8;border:1px solid #e0e7ff;box-shadow:inset 0 1px 0 hsla(0,0%,100%,.8)}.exit-quiz-label{font-weight:600;font-size:clamp(14px,2.4vw,15px)}.exit-quiz-input{border:1px solid #cbd5e1;border-radius:12px;padding:12px 14px;font-size:clamp(16px,3vw,18px);outline:none;transition:border-color .12s ease,box-shadow .12s ease}.exit-quiz-input:focus{border-color:#94a3b8;box-shadow:0 0 0 4px rgba(59,130,246,.15)}.exit-quiz-error{color:#b91c1c;font-weight:600;margin:0}.exit-quiz-actions{display:flex;flex-wrap:wrap;gap:clamp(8px,1.6vw,12px)}.exit-quiz-cancel,.exit-quiz-submit{flex:1 1 160px;border-radius:12px;padding:clamp(12px,2vw,14px);font-size:clamp(14px,2.6vw,16px);font-weight:700;cursor:pointer;border:1px solid #cbd5e1;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease,background-color .12s ease}.exit-quiz-submit{background:#1d4ed8;color:#fff;border-color:#1d4ed8}.exit-quiz-cancel{background:#f8fafc;color:#0f172a}.exit-quiz-cancel:focus-visible,.exit-quiz-cancel:hover,.exit-quiz-submit:focus-visible,.exit-quiz-submit:hover{outline:none;border-color:#94a3b8;box-shadow:0 8px 18px rgba(15,23,42,.16);transform:translateY(-1px)}.numbers-banner{margin-bottom:clamp(12px,3vw,24px);padding:clamp(8px,1.6vw,18px);align-items:center;justify-content:space-between;gap:clamp(8px,1.6vw,18px);flex-wrap:wrap}.numbers-actions{display:flex;align-items:stretch;gap:clamp(8px,1.4vw,16px)}.numbers-action-card{min-height:clamp(44px,5vw,64px);min-width:clamp(74px,8vw,120px);padding-inline:clamp(12px,2vw,24px)}.numbers-banner-controls{display:flex;align-items:center;gap:clamp(8px,1.6vw,18px);margin-left:auto;flex-wrap:wrap;justify-content:flex-end}.numbers-language-flags{flex:1 1;justify-content:flex-end}.numbers-language-flags .word-flag{font-size:clamp(18px,3vw,28px);padding:clamp(4px,.8vw,8px)}.numbers-speaker{width:clamp(40px,6vw,60px);height:clamp(40px,6vw,60px)}.manual-sequence{display:flex;flex-direction:column;align-items:stretch;gap:clamp(16px,2.6vw,32px);font-size:clamp(38px,14vmin,110px);font-weight:800;padding:clamp(24px,6vw,48px) clamp(24px,6vw,48px) clamp(92px,14vw,140px)}.manual-row{--manual-row-size:10;--manual-gap:clamp(12px,2vw,20px);display:grid;grid-template-columns:repeat(var(--manual-row-size),minmax(0,1fr));grid-gap:var(--manual-gap);gap:var(--manual-gap);width:100%;justify-items:center}.manual-card{border:1px solid #e2e8f0;border-radius:18px;background:#fff;min-width:clamp(68px,12vw,140px);min-height:clamp(72px,12vw,140px);padding:clamp(14px,2.4vw,28px);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 14px 24px rgba(15,23,42,.12);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;background-image:linear-gradient(135deg,#fff,#f8fafc)}.manual-card:focus-visible,.manual-card:hover{outline:none;transform:translateY(-2px) scale(1.01);border-color:#cbd5e1;box-shadow:0 18px 30px rgba(15,23,42,.18)}.manual-card:disabled{cursor:not-allowed;opacity:.6;transform:none;box-shadow:none}.manual-value{display:inline-flex;gap:8px;font-size:clamp(44px,16vmin,120px);flex-wrap:nowrap;align-items:baseline;white-space:nowrap}.number-size-xxl{font-size:clamp(48px,16vmin,120px)}.number-size-xl{font-size:clamp(42px,14vmin,96px)}.number-size-lg{font-size:clamp(36px,12vmin,84px)}.number-size-md{font-size:clamp(32px,11vmin,72px)}.number-size-sm{font-size:clamp(28px,10vmin,64px)}.manual-plus-wrapper{position:fixed;right:clamp(14px,4vw,28px);bottom:clamp(16px,5vw,32px);z-index:20}.manual-plus{border:none;background:#1d4ed8;color:#fff;border-radius:18px;width:clamp(60px,10vw,100px);height:clamp(60px,10vw,100px);font-size:clamp(32px,5vw,48px);font-weight:800;cursor:pointer;box-shadow:0 16px 32px rgba(30,64,175,.35);display:inline-flex;align-items:center;justify-content:center}.manual-plus:focus-visible,.manual-plus:hover{outline:none;transform:translateY(-3px)}@media (max-width:720px){.word-banner{flex-direction:column;text-align:center}.word-banner-column{width:100%;flex-direction:row;justify-content:center}.word-info{flex-direction:column;align-items:center}.word-controls,.word-display{justify-content:center}.word-placeholder{text-align:center}}.numbers-grid{gap:clamp(10px,1.8vh,24px);padding-bottom:clamp(40px,10vh,120px);overflow:visible}.numbers-grid,.numbers-row-group{display:flex;flex-direction:column}.numbers-row-group{gap:clamp(4px,.8vw,10px)}.numbers-row-label{font-size:clamp(14px,2vw,22px);font-weight:700;color:#0f172a;letter-spacing:.04em}.numbers-row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-gap:clamp(4px,.8vw,12px);gap:clamp(4px,.8vw,12px)}.digit-tile{font-size:clamp(38px,12vmin,90px);border-radius:14px;border:1px solid #e2e8f0;background:#f8fafc;padding:clamp(12px,1.8vw,20px);font-weight:800;color:var(--accent);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;min-height:clamp(68px,8vw,120px);white-space:nowrap}.digit-char{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;line-height:1;margin:0 1px}.digit-unit{color:#16a34a}.digit-ten{color:#1d4ed8}.digit-hundred{color:#f97316}.digit-thousand{color:#dc2626}.digit-tile:focus-visible,.digit-tile:hover{transform:translateY(-2px);border-color:#cbd5e1;box-shadow:0 12px 22px rgba(15,23,42,.08);outline:none}.digit-tile:active{transform:translateY(0)}.digit-tile:disabled{opacity:.5;cursor:not-allowed}.numbers-auto-sentinel{width:100%;height:1px}.alert{margin:0 0 16px;padding:12px 14px;border-radius:10px;background:hsla(0,91%,71%,.08);border:1px solid hsla(0,91%,71%,.25);color:#b91c1c}.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}.colors-page{display:flex;flex-direction:column;gap:clamp(16px,2vh,28px)}.colors-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:clamp(12px,2vw,18px)}.colors-header h1{font-size:clamp(28px,3.2vw,36px);margin:0}.colors-header .subtitle{margin:6px 0 0;color:var(--muted)}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:#6366f1;margin:0 0 4px}.color-nav{display:flex;gap:clamp(8px,2vw,12px)}.colors-layout{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1.2fr);grid-gap:clamp(16px,3vw,28px);gap:clamp(16px,3vw,28px);align-items:start}@media (max-width:820px){.colors-layout{grid-template-columns:1fr}}.color-card{border:1px solid #e2e8f0;border-radius:18px;background:linear-gradient(145deg,#f8fafc,#eef2ff);padding:clamp(14px,3vw,18px);display:grid;grid-template-rows:1fr auto;grid-gap:14px;gap:14px}.color-preview{border-radius:14px;min-height:240px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.04),0 12px 24px rgba(15,23,42,.18)}.color-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:8px;gap:8px}.value-line{margin:0;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;background:hsla(0,0%,100%,.8);border:1px solid #e2e8f0;font-weight:600}.camera-page{display:flex;flex-direction:column;gap:clamp(16px,2vh,28px);padding-bottom:110px}.camera-grid{display:grid;grid-template-columns:minmax(320px,1.2fr) minmax(260px,.8fr);grid-gap:clamp(16px,3vw,28px);gap:clamp(16px,3vw,28px);align-items:start}@media (max-width:840px){.camera-grid{grid-template-columns:1fr}}.camera-panel{border:1px solid #e2e8f0;border-radius:18px;padding:clamp(12px,2vw,16px);background:#0f172a;color:#f8fafc;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.08),0 14px 28px rgba(15,23,42,.2)}.camera-selector{display:grid;grid-gap:6px;gap:6px}.camera-selector label{font-weight:700;letter-spacing:.01em}.camera-select-shell{position:relative;border-radius:12px;border:1px solid hsla(0,0%,100%,.22);background:rgba(15,23,42,.8);box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.06)}.camera-select{width:100%;border:none;background:transparent;color:#f8fafc;padding:12px;border-radius:12px;font-weight:700;-webkit-appearance:none;-moz-appearance:none;appearance:none}.camera-select:focus-visible{outline:2px solid #38bdf8;outline-offset:2px}.camera-preview{position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#0b1220;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.08)}.camera-video{width:100%;height:100%;object-fit:cover;display:block}.camera-video.is-zoomed{width:170%;height:170%;transform:translate(-30%,-30%)}.camera-crosshair{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),hsla(0,0%,100%,.9) calc(50% - 1px),hsla(0,0%,100%,.9) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(180deg,transparent 0,transparent calc(50% - 1px),hsla(0,0%,100%,.9) calc(50% - 1px),hsla(0,0%,100%,.9) calc(50% + 1px),transparent calc(50% + 1px));box-shadow:inset 0 0 0 1px rgba(15,23,42,.22)}.camera-crosshair-gap{position:absolute;left:50%;top:50%;width:20px;height:20px;border:2px solid hsla(0,0%,100%,.9);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(15,23,42,.35);background:transparent}.camera-status{margin:0;color:rgba(248,250,252,.9);font-size:clamp(14px,2.4vw,16px)}.camera-color-card{border:1px solid #e2e8f0;border-radius:18px;background:linear-gradient(160deg,#f8fafc,#eef2ff);padding:clamp(14px,3vw,18px);display:grid;grid-template-rows:minmax(200px,1fr) auto;grid-gap:14px;gap:14px;box-shadow:0 14px 24px rgba(15,23,42,.14)}.camera-color-preview{border-radius:14px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.08),0 12px 20px rgba(15,23,42,.12);min-height:240px}.camera-color-values{display:grid;grid-gap:8px;gap:8px}.camera-color-values p{margin:0;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;background:hsla(0,0%,100%,.8);border:1px solid #e2e8f0;font-weight:600}.camera-actions{display:grid;grid-gap:6px;gap:6px}.save-color-button{border:1px solid #cbd5e1;background:linear-gradient(120deg,#0f172a,#1e293b);color:#f8fafc;border-radius:12px;padding:12px 14px;font-weight:700;font-size:15px;cursor:pointer;transition:transform .12s ease,box-shadow .15s ease,border-color .12s ease;box-shadow:0 10px 18px rgba(15,23,42,.16)}.save-color-button:focus-visible,.save-color-button:hover{outline:none;transform:translateY(-1px);box-shadow:0 14px 22px rgba(15,23,42,.2);border-color:#94a3b8}.save-hint{margin:0;color:var(--muted);font-size:14px}.saved-colors{border-top:1px solid #e2e8f0;padding-top:10px;display:grid;grid-gap:10px;gap:10px}.saved-colors h2{margin:0;font-size:16px}.saved-colors ul{list-style:none;padding:0;margin:0;display:grid;grid-gap:10px;gap:10px}.saved-color-button{width:100%;text-align:left;padding:0;border:none;background:transparent;cursor:pointer}.saved-color-button,.saved-colors li{display:flex;align-items:center;gap:12px}.saved-colors li{padding:10px 12px;border-radius:12px;border:1px solid #e2e8f0;background:hsla(0,0%,100%,.9);box-shadow:inset 0 0 0 1px rgba(15,23,42,.03),0 8px 14px rgba(15,23,42,.08)}.saved-color-swatch{width:44px;height:44px;border-radius:10px;border:1px solid #cbd5e1;box-shadow:inset 0 0 0 1px rgba(15,23,42,.14)}.saved-color-values{display:flex;flex-direction:column;gap:4px;font-weight:700}.saved-hex{font-size:15px}.saved-rgb{font-size:13px;color:var(--muted);font-weight:600}.camera-save-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;width:min(420px,calc(100% - 24px));display:flex;justify-content:center;padding:12px 14px;border-radius:16px;background:rgba(15,23,42,.94);border:1px solid hsla(0,0%,100%,.16);box-shadow:0 20px 35px rgba(0,0,0,.25)}@media (max-width:720px){.camera-save-bar{padding:12px;width:calc(100% - 20px)}}.color-controls{display:grid;grid-gap:12px;gap:12px}.color-slider{display:grid;grid-gap:8px;gap:8px;padding:12px;border-radius:14px;border:1px solid #e2e8f0;background:#f8fafc}.slider-header{display:flex;align-items:center;justify-content:space-between;font-weight:700;color:var(--accent)}.slider-title{display:inline-flex;align-items:center;gap:8px}.slider-swatch{width:18px;height:18px;border-radius:6px;border:1px solid #e2e8f0;box-shadow:inset 0 1px 0 hsla(0,0%,100%,.6),0 1px 4px rgba(15,23,42,.14)}.color-slider input[type=range]{width:100%;accent-color:#6366f1}