@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#10131b;--panel:#171c27;--panel2:#1d2431;--line:#2b3444;--text:#f3f5fa;--muted:#9ba7ba;--accent:#a6f0d0;--accent2:#d5ffe9;--orange:#ffbd8b;--red:#ff8d9b}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% -20%,#253044 0,transparent 48%),var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;min-height:100vh}.topbar{height:auto;min-height:72px;padding:14px max(22px,calc((100vw - 1120px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #ffffff12;background:#10131bd9;backdrop-filter:blur(16px);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:10px;color:var(--text);font:800 17px Manrope,sans-serif;letter-spacing:2px;text-decoration:none;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--accent);color:#14251f;font:800 17px Manrope}.topbar nav{display:flex;gap:6px;overflow:auto}.nav-button{border:0;background:transparent;color:var(--muted);padding:9px 12px;border-radius:9px;white-space:nowrap;font:600 13px "DM Sans";cursor:pointer}.nav-button.active,.nav-button:hover{background:var(--panel2);color:var(--accent)}#favorite-count{font:11px "DM Mono";color:var(--accent);margin-left:3px}.shell{width:min(100% - 36px,980px);margin:0 auto;min-height:calc(100vh - 140px)}.hero{text-align:center;padding:76px 0 42px}.eyebrow{font:500 10px "DM Mono";letter-spacing:2.4px;color:var(--accent);margin:0 0 13px}.hero h1,.section-heading h1{font:800 clamp(36px,7vw,60px)/1.05 Manrope,sans-serif;letter-spacing:-2.5px;margin:0}.hero h1 span{color:var(--accent)}.subhead{color:var(--muted);max-width:530px;margin:18px auto 26px;line-height:1.65}.searchbar{max-width:660px;margin:auto;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 18px;border:1px solid #465367;background:#171d29;border-radius:15px;position:relative;box-shadow:0 14px 50px #0003}.searchbar>span{font-size:27px;color:var(--accent)}.searchbar input{min-width:0;flex:1;background:none;border:0;outline:0;color:var(--text);font:16px "DM Sans"}.searchbar button,.primary{border:0;border-radius:10px;background:var(--accent);color:#12231d;padding:12px 18px;font:700 13px "DM Sans";cursor:pointer}.hint{font:11px "DM Mono";color:#6f7c90;margin-top:13px}.suggestions{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#202938;border:1px solid var(--line);border-radius:12px;z-index:4;overflow:hidden;text-align:left;box-shadow:0 15px 35px #0008}.suggestion{display:block;width:100%;padding:12px 17px;background:none;border:0;border-bottom:1px solid #ffffff0c;color:var(--text);text-align:left;cursor:pointer}.suggestion:hover{background:#ffffff0b}.suggestion small{color:var(--muted);margin-left:8px}.hidden{display:none!important}.welcome-card,.entry-card,.source-card,.note{background:linear-gradient(135deg,#1b2330,#171c27);border:1px solid var(--line);border-radius:17px}.welcome-card{display:flex;align-items:center;gap:18px;padding:22px}.welcome-icon{font:700 26px Georgia;color:var(--accent);background:#a6f0d014;border:1px solid #a6f0d033;border-radius:12px;padding:15px}.welcome-card h2{font:700 17px Manrope;margin:0 0 5px}.welcome-card p,.section-heading p{color:var(--muted);font-size:13px;line-height:1.6;margin:0}.welcome-card .secondary{margin-left:auto;white-space:nowrap}.secondary{background:#252e3c;color:var(--text);border:1px solid #3a4658;border-radius:9px;padding:11px 14px;font:600 12px "DM Sans";cursor:pointer}.section-heading{padding:54px 0 25px}.section-heading h1{font-size:clamp(32px,6vw,46px);margin-bottom:10px}.toolbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}.word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.word-tile{padding:17px;border:1px solid var(--line);border-radius:13px;background:var(--panel);cursor:pointer}.word-tile:hover{border-color:#789b8e}.word-tile h3{font:700 18px Manrope;margin:0 0 6px}.word-tile p{font-size:12px;color:var(--muted);margin:0;line-height:1.5}.entry-card{padding:clamp(18px,4vw,30px);margin:0 0 22px}.entry-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.entry-word{font:800 clamp(34px,7vw,54px)/1.05 Manrope;letter-spacing:-1.7px;margin:0 0 8px;overflow-wrap:anywhere}.phonetic{font:14px "DM Mono";color:var(--accent)}.entry-actions{display:flex;gap:8px;flex-wrap:wrap}.icon-button{background:#242e3d;border:1px solid #3a4658;color:var(--text);border-radius:10px;padding:10px 12px;cursor:pointer}.icon-button.saved{color:var(--accent);border-color:#a6f0d077}.entry-meta{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0 23px}.tag{font:10px "DM Mono";color:#b6c3d5;border:1px solid #3a4658;border-radius:99px;padding:5px 9px}.entry-section{border-top:1px solid #ffffff12;padding:20px 0 3px}.entry-section h3{font:700 13px Manrope;color:var(--accent);margin:0 0 13px}.definition{margin:0 0 16px 0;padding-left:17px;line-height:1.6}.definition li{padding-left:5px;margin-bottom:9px}.definition .pos{display:block;font:italic 11px "DM Mono";color:var(--orange);margin-bottom:4px}.example{color:var(--muted);font-size:13px;margin:6px 0 0}.audio-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.audio-row audio{max-width:100%;height:34px}.related{display:flex;flex-wrap:wrap;gap:8px}.related button{background:#242e3d;color:var(--text);border:1px solid #3a4658;border-radius:99px;padding:7px 11px;cursor:pointer}.empty{padding:22px;color:var(--muted);border:1px dashed #3a4658;border-radius:13px;font-size:13px}.source-list{display:grid;gap:12px}.source-card{display:flex;gap:15px;align-items:flex-start;padding:18px}.source-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;background:#a6f0d018;color:var(--accent);border-radius:11px;font:700 18px Manrope}.source-card h3{margin:0 0 5px;font:700 15px Manrope}.source-card p{margin:0 0 7px;color:var(--muted);font-size:12px;line-height:1.55}.source-card a{font-size:11px;color:var(--accent)}.status{margin-left:auto;font:10px "DM Mono";letter-spacing:1px;white-space:nowrap}.connected{color:var(--accent)}.planned{color:var(--orange)}.note{padding:15px;margin-top:18px;color:var(--muted);font-size:12px;line-height:1.6}.note strong{color:var(--text)}dialog{background:#1b2330;color:var(--text);border:1px solid #455268;border-radius:17px;padding:0;width:min(92vw,520px);max-height:90vh;overflow:auto;box-shadow:0 25px 90px #000b}dialog::backdrop{background:#05070bc9;backdrop-filter:blur(5px)}#word-form{padding:23px;display:grid;gap:13px}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start}.dialog-head h2{font:700 23px Manrope;margin:0 0 6px}.close-button{background:none;border:0;color:var(--muted);font-size:28px;cursor:pointer}label{display:grid;gap:6px;font-size:12px;color:#cbd4e1}input,textarea,select{font:14px "DM Sans";color:var(--text);background:#111722;border:1px solid #3a4658;border-radius:9px;padding:11px;outline:none;width:100%}input:focus,textarea:focus,select:focus{border-color:var(--accent)}textarea{resize:vertical}.optional,.form-note{font-size:10px;color:var(--muted)}.form-note{line-height:1.5}.dialog-actions{display:flex;justify-content:flex-end;gap:9px}footer{width:min(100% - 36px,980px);margin:35px auto 0;border-top:1px solid #ffffff12;padding:19px 0 25px;display:flex;justify-content:space-between;color:#aab5c5;font:10px "DM Mono";letter-spacing:.5px}.muted{color:#647187}
@media(max-width:650px){.topbar{align-items:flex-start;flex-direction:column;padding:13px 18px;gap:9px}.topbar nav{width:100%;padding-bottom:2px}.nav-button{padding:8px 10px;font-size:12px}.shell{width:min(100% - 28px,980px)}.hero{padding:55px 0 30px}.hero h1{letter-spacing:-1.7px}.searchbar{gap:8px;padding-left:12px}.searchbar button{padding:11px 12px}.welcome-card{align-items:flex-start;flex-wrap:wrap}.welcome-card .secondary{margin-left:0}.entry-top{flex-direction:column}.entry-actions{width:100%}.entry-actions button{flex:1}.source-card{gap:10px}.status{font-size:9px}footer{width:calc(100% - 28px)}}