@import url('data:text/css,');
:root{--ink:#152421;--muted:#61716d;--green:#173f39;--green-2:#24594f;--mint:#dff2eb;--cream:#f7f5ee;--paper:#fffefa;--line:#d9dfda;--coral:#c94e35;--gold:#e8b94f;--shadow:0 10px 30px rgba(24,49,43,.09);--radius:20px;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--cream)}body{margin:0;color:var(--ink);background:var(--cream);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit;color:inherit}button{touch-action:manipulation}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #d4971d;outline-offset:3px}.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}.skip-link{position:fixed;top:8px;left:8px;z-index:99;transform:translateY(-150%);padding:12px 18px;background:#fff;border-radius:10px;color:var(--green);font-weight:800}.skip-link:focus{transform:none}.topbar{min-height:80px;padding:14px max(20px,calc((100vw - 1160px)/2));display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--green);color:white}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border:2px solid rgba(255,255,255,.55);border-radius:15px;background:#24564e;font-family:Georgia,serif;font-size:27px;font-weight:700}.brand h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(20px,4vw,27px);line-height:1.1}.brand p{margin:3px 0 0;color:#c6ddd7;font-size:13px}.header-actions{display:flex;align-items:center;gap:10px}.connection-pill{padding:7px 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#d6e7e2;font-size:12px;white-space:nowrap}.connection-pill span{color:#68d69f;margin-right:4px}.icon-button{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:13px;background:transparent;color:white}.icon-button svg{width:23px;fill:none;stroke:currentColor;stroke-width:1.8}.icon-button:hover{background:rgba(255,255,255,.1)}main{max-width:1160px;margin:auto;padding:24px 20px 48px}.welcome{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px;margin-bottom:18px;background:var(--mint);border:1px solid #bddbd1;border-radius:var(--radius)}.welcome[hidden]{display:none}.welcome h2,.section-heading h2,.library-head h2{margin:2px 0 4px;font-family:Georgia,"Times New Roman",serif;font-size:22px}.welcome p{margin:0;color:#3f5b54}.eyebrow{color:var(--green-2);font-size:11px;font-weight:850;letter-spacing:.12em}.quiet-button,.secondary-button,.primary-button,.danger-button,.control-button,.install-button{min-height:48px;border-radius:13px;padding:10px 16px;font-weight:800;cursor:pointer}.quiet-button{flex:none;border:1px solid var(--green-2);background:transparent;color:var(--green)}.speaker-panel{position:sticky;top:8px;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:124px;padding:22px 24px;margin-bottom:18px;color:white;background:linear-gradient(135deg,var(--green),#225b50);border-radius:var(--radius);box-shadow:0 14px 30px rgba(23,63,57,.22)}.status-label{display:flex;align-items:center;gap:7px;color:#aee0d3;font-size:11px;font-weight:850;letter-spacing:.12em}.pulse{width:8px;height:8px;border-radius:50%;background:#7dd8ae}.speaker-panel.speaking .pulse{animation:pulse 1s infinite;background:#f6c85f}.speaker-panel.speaking .status-label{color:#ffdf8e}@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(246,200,95,.15)}}#spokenText{max-width:720px;margin:8px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(20px,3vw,29px);line-height:1.22}.speaker-controls{display:flex;gap:8px}.control-button{min-width:92px;border:1px solid rgba(255,255,255,.28);color:white;background:rgba(255,255,255,.08)}.control-button.repeat{background:white;color:var(--green)}.control-button:disabled{opacity:.42;cursor:not-allowed}.composer,.library{padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.composer{margin-bottom:18px}.section-heading,.library-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.local-note{padding:5px 9px;border-radius:999px;background:#edf1ee;color:var(--muted);font-size:11px;font-weight:700}.composer textarea{width:100%;min-height:75px;resize:vertical;padding:16px;border:1.5px solid #cbd4ce;border-radius:14px;background:#fff;font-size:18px}.composer textarea:focus{border-color:var(--green-2)}.composer-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:10px}.composer-actions #characterCount{margin-right:auto;color:var(--muted);font-size:12px}.secondary-button{border:1px solid #aebbb5;background:white;color:var(--green)}.primary-button{border:1px solid var(--green);background:var(--green);color:white}.primary-button:hover{background:var(--green-2)}.library-head{align-items:flex-end}.search-box{position:relative;display:flex;align-items:center;width:min(100%,330px)}.search-box svg{position:absolute;left:14px;width:20px;fill:none;stroke:var(--muted);stroke-width:2}.search-box input{width:100%;height:48px;padding:0 40px 0 44px;border:1.5px solid #cbd4ce;border-radius:14px;background:#fff}.search-box button{position:absolute;right:7px;width:34px;height:34px;border:0;border-radius:9px;background:#edf1ee;font-size:22px}.view-tabs{display:flex;gap:8px;padding-bottom:15px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}.view-tab,.category-button{white-space:nowrap;cursor:pointer}.view-tab{min-height:42px;padding:8px 14px;border:1px solid var(--line);border-radius:11px;background:white;color:#42534f;font-weight:750}.view-tab.active{border-color:var(--green);background:var(--green);color:white}.view-tab span{display:inline-grid;place-items:center;min-width:19px;height:19px;margin-left:3px;padding:0 5px;border-radius:10px;background:rgba(0,0,0,.09);font-size:11px}.category-scroll{display:flex;gap:7px;margin:15px -4px 10px;padding:4px;overflow-x:auto;scrollbar-width:none}.category-button{min-height:39px;padding:8px 13px;border:0;border-radius:999px;background:#eef1ee;color:#4d5c58;font-size:13px;font-weight:700}.category-button.active{background:var(--mint);color:var(--green);box-shadow:inset 0 0 0 1px #a9d4c7}.phrase-section{padding-top:18px;scroll-margin-top:160px}.phrase-section-header{display:flex;align-items:center;gap:9px;margin-bottom:10px}.category-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--mint);font-size:17px}.phrase-section h3{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:20px}.phrase-count{color:var(--muted);font-size:12px}.phrase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.phrase-card{position:relative;display:flex;align-items:stretch;min-height:78px;border:1px solid #d5ddd8;border-radius:15px;background:white;overflow:hidden;transition:transform .12s,border-color .12s,box-shadow .12s}.phrase-card:hover{border-color:#8eb3a7;box-shadow:0 6px 15px rgba(27,63,54,.08);transform:translateY(-1px)}.speak-phrase{flex:1;display:flex;align-items:center;gap:12px;padding:14px 10px 14px 15px;text-align:left;border:0;background:transparent;cursor:pointer;font-weight:700;line-height:1.28}.play-icon{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--mint);color:var(--green);font-size:13px}.phrase-card.active{border-color:var(--green-2);background:#f0faf6;box-shadow:0 0 0 2px #86c7b5}.phrase-actions{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:5px}.favorite-button,.edit-button{display:grid;place-items:center;width:40px;height:34px;border:0;border-radius:9px;background:transparent;color:#788682;cursor:pointer;font-size:21px}.favorite-button.active{color:#a66d00}.edit-button{font-size:15px}.favorite-button:hover,.edit-button:hover{background:#edf3ef}.empty-state{text-align:center;padding:58px 15px}.empty-state>div{font-size:42px;color:#8ba099}.empty-state h3{margin:8px 0 2px}.empty-state p{margin:0 0 18px;color:var(--muted)}footer{max-width:1160px;margin:auto;padding:0 20px calc(32px + var(--safe-bottom));display:flex;justify-content:space-between;align-items:center;gap:22px;color:var(--muted);font-size:12px}footer p{max-width:750px}.install-button{border:1px solid var(--green);background:transparent;color:var(--green);white-space:nowrap}dialog{width:min(92vw,520px);padding:0;border:0;border-radius:22px;color:var(--ink);background:var(--paper);box-shadow:0 25px 70px rgba(8,24,20,.35)}dialog::backdrop{background:rgba(11,34,29,.62);backdrop-filter:blur(3px)}dialog form{padding:24px}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px}.dialog-head h2{margin:2px 0;font:700 27px Georgia,serif}.close-button{width:44px;height:44px;border:0;border-radius:12px;background:#edf0ed;color:#465651;font-size:26px;cursor:pointer}.setting-field{display:grid;grid-template-columns:1fr auto;gap:7px;margin:17px 0;font-weight:800}.setting-field select,.setting-field textarea{grid-column:1/-1;width:100%;padding:13px;border:1.5px solid #bfcac4;border-radius:12px;background:white;font-weight:500}.setting-field small{grid-column:1/-1;color:var(--muted);font-size:11px;font-weight:500}.setting-field input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--green)}.setting-field output{color:var(--green-2)}.test-button,.done-button{width:100%;margin-top:8px}.done-button{margin-top:10px}.dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:20px}.dialog-actions span{flex:1}.danger-button{border:1px solid #bb4f3c;background:white;color:#a33726}.toast{position:fixed;left:50%;bottom:calc(22px + var(--safe-bottom));z-index:100;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:12px;background:#102f2a;color:white;font-weight:750;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translate(-50%,20px);transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.noscript{padding:18px;background:#fff0c8;color:#442f00;text-align:center}
@media(max-width:700px){.topbar{padding:11px 15px}.brand-mark{width:40px;height:40px}.brand p{display:none}.connection-pill{display:none}main{padding:14px 12px 36px}.welcome{align-items:flex-start;padding:17px;gap:12px}.welcome h2{font-size:19px}.welcome p{font-size:13px}.quiet-button{min-height:42px;padding:8px 12px}.speaker-panel{top:7px;display:block;min-height:0;padding:17px;margin-bottom:13px;border-radius:17px}.speaker-copy{min-height:76px}#spokenText{font-size:21px}.speaker-controls{justify-content:stretch;margin-top:12px}.control-button{flex:1}.composer,.library{padding:17px;border-radius:17px}.composer{margin-bottom:13px}.composer-actions{display:grid;grid-template-columns:1fr 1fr}.composer-actions #characterCount{grid-column:1/-1}.composer-actions button{padding:9px}.library-head{display:block}.search-box{width:100%;margin-top:12px}.view-tabs{margin-right:-17px;padding-right:17px}.phrase-grid{grid-template-columns:1fr}.phrase-card{min-height:76px}.category-scroll{margin-right:-17px;padding-right:17px}.speaker-panel.speaking{box-shadow:0 8px 22px rgba(23,63,57,.25)}footer{display:block;padding:0 17px calc(25px + var(--safe-bottom))}.install-button{width:100%;margin-top:8px}}
@media(min-width:900px){.phrase-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(prefers-contrast:more){:root{--muted:#3d4b48;--line:#9ca9a4}.phrase-card,.composer textarea,.search-box input{border-width:2px}}