:root { --ink:#20251f; --green:#123f2b; --green-2:#1e5a3d; --green-soft:#edf3ed; --cream:#f6f2e9; --paper:#fffefa; --gold:#bd9349; --line:#d9ddd5; --muted:#697169; --sans:Arial,Helvetica,sans-serif; --serif:Georgia,"Times New Roman",serif; }
* { box-sizing:border-box; }
[hidden],body:not(.features-ready) [data-feature] { display:none!important; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font:16px/1.62 var(--serif); }
button,input { font:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #d4ad6088; outline-offset:2px; }
.site-header { background:var(--green); color:white; border-bottom:4px solid var(--gold); }
.header-inner { width:min(1220px,calc(100% - 2.5rem)); margin:auto; padding:1.15rem 0 0; }
.back-link { color:#dce8e0; font:600 .82rem var(--sans); text-decoration:none; }
.header-copy { padding:.25rem 0 1rem; text-align:center; }
.eyebrow,.section-kicker { color:#d2ac63; font:700 .69rem var(--sans); letter-spacing:.17em; text-transform:uppercase; }
h1 { margin:.15rem 0; font-size:clamp(2rem,4vw,3.35rem); font-weight:500; line-height:1.16; letter-spacing:.012em; }
.header-copy p { margin:.3rem 0; color:#dce8e0; font-size:.94rem; }
.main-nav { display:flex; justify-content:center; gap:2.25rem; border-top:1px solid #ffffff24; }
.main-nav a { padding:.72rem 0; color:#f5f5ec; font:600 .77rem var(--sans); letter-spacing:.025em; text-decoration:none; }
.main-nav a:hover { color:#f0cf8b; }
main { width:min(1220px,calc(100% - 2.5rem)); margin:0 auto 4rem; }
.search-panel { position:relative; z-index:5; width:min(970px,100%); margin:2rem auto 1.15rem; text-align:center; }
.search-panel>label { display:block; margin-bottom:.55rem; color:var(--green); font:700 .75rem var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.search-control { position:relative; }
.search-icon { position:absolute; left:1.2rem; top:50%; color:var(--green-2); font:2rem var(--serif); transform:translateY(-54%); pointer-events:none; }
#dictionary-search { width:100%; padding:1.05rem 1.15rem 1.05rem 3.5rem; border:1px solid #9ba89e; border-radius:2px; background:var(--paper); box-shadow:0 8px 24px #173b2912; color:var(--ink); font:clamp(1.1rem,2vw,1.35rem) var(--serif); }
#dictionary-search:focus { border-color:var(--gold); outline:3px solid #d4ad6044; }
.status { min-height:1.4em; margin:.5rem 0 0; color:var(--muted); font:.78rem var(--sans); }
.status.error { color:#8c2f26; }
.search-results { position:absolute; top:calc(100% - 1.8rem); right:0; left:0; z-index:10; max-height:22rem; overflow:auto; border:1px solid var(--line); box-shadow:0 14px 36px #13281b28; background:white; text-align:left; }
.search-results:empty { display:none; }
.result-button { display:flex; width:100%; justify-content:space-between; align-items:center; gap:1rem; padding:.65rem 1rem; border:0; border-bottom:1px solid #e8e9e4; background:white; color:var(--ink); text-align:left; cursor:pointer; }
.result-button:hover,.result-button:focus { background:var(--green-soft); }
.result-button>span:first-child { display:flex; align-items:baseline; gap:.55rem; }.result-lemma { color:var(--green); font:700 1.05rem var(--serif); }.result-button small,.result-type { color:var(--muted); font:.7rem var(--sans); }.no-results { margin:0; padding:1rem; color:var(--muted); }
.alphabet { display:flex; overflow-x:auto; justify-content:center; gap:.15rem; padding:.5rem 0 1rem; scrollbar-width:thin; }
.alphabet button { flex:0 0 auto; min-width:2rem; padding:.42rem .4rem; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--green); font:700 .8rem var(--sans); cursor:pointer; }
.alphabet button:hover:not(:disabled) { background:#e8eee7; }.alphabet button[aria-pressed="true"] { border-color:var(--gold); background:var(--green); color:white; }.alphabet button:disabled { color:#aeb2ad; cursor:not-allowed; }
.dictionary-workspace { display:grid; grid-template-columns:minmax(280px,35fr) minmax(0,65fr); align-items:start; gap:1.4rem; }
.wheel-panel { position:sticky; top:1rem; border:1px solid var(--line); background:#fdfbf5; box-shadow:0 3px 16px #173b290d; }
.wheel-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; padding:1.1rem 1.2rem .7rem; border-bottom:1px solid var(--line); }
.wheel-heading h2 { margin:.05rem 0; color:var(--green); font-size:1.12rem; font-weight:500; }.wheel-heading #entry-count { color:var(--muted); font:.7rem var(--sans); white-space:nowrap; }
.wheel-shell { position:relative; padding:2rem 0; overflow:hidden; background:linear-gradient(#f2efe6aa,transparent 27%,transparent 73%,#f2efe6aa); }
.wheel { display:flex; height:21rem; flex-direction:column; justify-content:center; overflow:hidden; outline:none; touch-action:pan-y; }
.wheel-item { z-index:1; height:2.3rem; flex:0 0 2.3rem; border:0; background:transparent; color:#788078; cursor:pointer; transition:font-size .14s,color .14s,opacity .14s; }
.wheel-placeholder { display:block; pointer-events:none; }
.wheel-item.distance-0 { color:var(--green); font-size:1.43rem; font-weight:700; }.wheel-item.distance-1 { color:#3f5045; font-size:1.1rem; }.wheel-item.distance-2 { color:#657068; font-size:.98rem; }.wheel-item.distance-3 { opacity:.62; font-size:.9rem; }.wheel-item.distance-4 { opacity:.37; font-size:.83rem; }
.selection-band { position:absolute; top:50%; right:1rem; left:1rem; height:2.65rem; border-top:1px solid #bd934966; border-bottom:1px solid #bd934966; background:#f0eadb66; transform:translateY(-50%); pointer-events:none; }
.wheel-arrow { position:absolute; right:0; left:0; z-index:2; width:3rem; margin:auto; border:0; background:transparent; color:var(--green); font:1.2rem var(--sans); cursor:pointer; }.wheel-arrow:first-child { top:.2rem; }.wheel-arrow:last-child { bottom:.2rem; }.wheel-help { margin:0; padding:.55rem; border-top:1px solid var(--line); color:var(--muted); font:.68rem var(--sans); text-align:center; }
.article-view { min-width:0; }.welcome,.entry { border:1px solid var(--line); border-top:4px solid var(--green); background:var(--paper); box-shadow:0 3px 16px #173b290d; }.welcome { padding:5rem 2rem; text-align:center; color:var(--muted); }.welcome h2 { color:var(--green); font-size:2rem; font-weight:500; }
.entry { padding:clamp(1.25rem,3.5vw,2.8rem); }.entry-header { padding-bottom:1.2rem; border-bottom:1px solid var(--line); }.entry h2 { margin:.08rem 0; color:var(--green); font-size:clamp(2.5rem,5vw,4rem); font-weight:500; line-height:1.08; }.entry h2 sup { margin-left:.15rem; font-size:.4em; }
.metadata,.labels { display:flex; flex-wrap:wrap; gap:.38rem; margin:.8rem 0 0; }.tag { padding:.14rem .48rem; border:1px solid #cfdbd0; border-radius:2px; background:var(--green-soft); color:#3b5946; font:.72rem var(--sans); }
.cross-reference { padding:.7rem 0;color:var(--green);}.sense { display:grid; grid-template-columns:3rem minmax(0,1fr); gap:.6rem; padding:1.8rem 0 2rem; border-bottom:1px solid var(--line); scroll-margin-top:1rem; }.sense:last-child { border-bottom:0; }.sense-number span { display:grid; width:2rem; height:2rem; place-items:center; border:1px solid #b8c8bc; border-radius:50%; color:var(--green); font:bold 1rem var(--sans); }.sense-number small { display:block; margin-top:.25rem; color:var(--muted); font:.61rem var(--sans); }
.equivalent { color:#18271d; font-size:clamp(1.3rem,2.5vw,1.62rem); font-weight:700; line-height:1.35; }.grammar { font-size:.88em; font-weight:400; }.definition { margin:.9rem 0; font-size:1.04rem; }.usage { color:#4f5b53; font-style:italic; }
.sense-extra { margin:1rem 0 0; padding:.75rem .9rem; border-left:2px solid #9caf9f; background:#f6f7f2; }.sense-extra h4 { margin:0 0 .3rem; color:var(--green); font:700 .7rem var(--sans); letter-spacing:.08em; text-transform:uppercase; }.sense-extra ul { margin:0; padding:0; list-style:none; }.sense-extra li+li { margin-top:.3rem; }.examples { border-left-color:var(--gold); background:#faf7ef; }.bosnian-example { color:var(--muted); }.tv,.collocations,.phraseology { font-size:.92rem; }
.article-actions { display:flex; gap:.6rem; flex-wrap:wrap; padding-top:1.25rem; border-top:1px solid var(--line); }.article-actions button,.correction-button,.primary-button,.secondary-button { padding:.55rem .8rem; border:1px solid #9eafa2; background:white; color:var(--green); font:700 .72rem var(--sans); cursor:pointer; }.correction-button { margin-top:1rem; }
.info-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:2.4rem 0 1rem; }.info-grid article,.about { padding:1.2rem; border-top:2px solid var(--green); background:#eceae2; }.info-grid span { color:var(--gold); font:700 .68rem var(--sans); }.info-grid h2,.about h2 { margin:.2rem 0 .5rem; color:var(--green); font-size:1rem; text-transform:uppercase; letter-spacing:.04em; }.info-grid p,.about p { margin:0; color:#5d655f; font-size:.86rem; }.about { margin-top:1rem; }
dialog { width:min(620px,calc(100% - 2rem)); border:0; padding:0; box-shadow:0 18px 70px #0005; }dialog::backdrop{background:#102218aa}dialog form{padding:1.4rem;display:grid;gap:1rem}.dialog-heading{display:flex;justify-content:space-between}.dialog-heading h2{margin:0;color:var(--green)}.icon-button{border:0;background:none;font-size:2rem}.form-note{margin:0;color:var(--muted)}dialog label{display:grid;gap:.3rem;font:700 .82rem var(--sans)}dialog input,dialog select,dialog textarea{width:100%;padding:.65rem;border:1px solid #9ba69e}.dialog-actions{display:flex;justify-content:flex-end;gap:.6rem}.primary-button{color:white;background:var(--green)}
body>footer { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; padding:1.5rem; background:#e5e7e1; color:var(--muted); font:.75rem var(--sans); }.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media(max-width:850px){.dictionary-workspace{grid-template-columns:minmax(240px,38fr) minmax(0,62fr);gap:.8rem}.sense{grid-template-columns:2.5rem minmax(0,1fr)}.info-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.header-inner,main{width:min(100% - 1rem,1220px)}.header-copy{padding-bottom:.7rem}.header-copy p{font-size:.8rem}.main-nav{justify-content:flex-start;gap:1.4rem;overflow:auto}.main-nav a{white-space:nowrap}.search-panel{margin-top:1.2rem}.search-results{top:calc(100% - 1.9rem)}.alphabet{justify-content:flex-start}.dictionary-workspace{grid-template-columns:1fr}.wheel-panel{position:relative;top:0}.wheel{height:13.8rem}.wheel-item{height:1.5rem;flex-basis:1.5rem}.wheel-item.distance-4{display:none}.wheel-shell{padding:1.4rem 0}.entry{padding:1.2rem}.sense{grid-template-columns:2.3rem minmax(0,1fr);padding:1.35rem 0}.info-grid{grid-template-columns:1fr}.article-actions button{flex:1 1 auto}}