:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  background: #07100f;
  color: rgba(245, 248, 239, 0.94);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; }
body {
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 46%, rgba(78, 116, 102, .12), transparent 34%),
    linear-gradient(145deg, #06100f 0%, #0a1213 48%, #0d1210 100%);
}

button { color: inherit; font: inherit; }
button:focus-visible { outline: 2px solid rgba(211, 235, 193, .85); outline-offset: 4px; }
#field { position: fixed; inset: 0; width: 100%; height: 100%; }
.grain {
  position: fixed; inset: -50%; pointer-events: none; opacity: .075; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  animation: grain 9s steps(8) infinite;
}
@keyframes grain { 0%,100% { transform: translate(0) } 25% { transform: translate(2%, -3%) } 50% { transform: translate(-3%, 2%) } 75% { transform: translate(3%, 4%) } }

main { position: relative; z-index: 2; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: 1.25rem; }
.glass {
  background: rgba(179, 205, 188, .065);
  border: 1px solid rgba(228, 242, 222, .11);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 16px 50px rgba(0,0,0,.14);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}
.topbar {
  position: relative; z-index: 20; overflow: visible;
  justify-self: stretch; height: 3.45rem; padding: .45rem .52rem .45rem .85rem; border-radius: 1.15rem;
  display: flex; align-items: center; justify-content: space-between;
  animation: materialize .8s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes materialize { from { opacity: 0; transform: translateY(-10px) scale(.985); backdrop-filter: blur(2px); } }
.brand, .mode-toggle, .select-button, .icon-button, .apps-button { border: 0; background: transparent; cursor: pointer; }
.brand { display: flex; align-items: center; gap: .65rem; padding: .5rem; font-size: .82rem; font-weight: 520; letter-spacing: .01em; }
.brand-mark { width: .75rem; height: .75rem; display: block; border-radius: 50%; background: #d8edbc; box-shadow: 0 0 12px #d7eebc99, 0 0 34px #a7cc8a55; }
.brand-mark.large { width: 2rem; height: 2rem; margin-bottom: 2rem; }
.transport { display: flex; height: 100%; align-items: center; gap: .25rem; }
.divider { width: 1px; height: 1.15rem; background: rgba(230,240,227,.12); margin: 0 .25rem; }
.select-button { min-width: 2.2rem; font-size: .75rem; border-radius: .65rem; padding: .55rem; }
.select-button:hover, .icon-button:hover { background: rgba(255,255,255,.065); }
.mode-toggle { display: flex; align-items: center; gap: .65rem; padding: .45rem; font-size: .72rem; color: rgba(241,246,237,.7); }
.mode-track { width: 2rem; height: 1.15rem; border-radius: 1rem; background: rgba(0,0,0,.22); padding: .14rem; box-shadow: inset 0 1px 4px rgba(0,0,0,.3); }
.mode-thumb { display: block; width: .87rem; height: .87rem; border-radius: 50%; background: #d7ebc0; box-shadow: 0 0 8px rgba(206,238,181,.48); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
body.minor .mode-thumb { transform: translateX(.85rem); background: #c1cfeb; }
.icon-button { width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: grid; place-items: center; opacity: .8; }
.icon-button[aria-pressed="false"] { opacity: .32; }
.icon-button.cleared { transform: scale(.88); opacity: .35; transition: none; }
.icon-button svg { width: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.control-anchor { position: relative; z-index: 5; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; }
.control-surface { position: absolute; z-index: 5; top: 0; left: 0; width: 2.5rem; height: 2.5rem; overflow: hidden; border: 1px solid transparent; border-radius: .78rem; background: transparent; box-shadow: none; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transform-origin: top center; transition: height .28s cubic-bezier(.2,.8,.2,1), border-radius .28s cubic-bezier(.2,.8,.2,1), background .2s ease, border-color .2s ease, box-shadow .28s ease, backdrop-filter .2s ease; }
.control-surface:hover, .control-surface:focus-within { height: 7.75rem; border-color: rgba(225,241,217,.14); border-radius: 1.25rem; background: linear-gradient(180deg, rgba(30,48,42,.88), rgba(8,18,16,.96)); box-shadow: 0 18px 38px rgba(0,0,0,.34), inset 0 1px rgba(245,255,239,.08); backdrop-filter: blur(24px) saturate(125%); -webkit-backdrop-filter: blur(24px) saturate(125%); }
.control-surface > .icon-button { position: absolute; z-index: 3; top: 0; left: 0; width: 2.5rem; }
.control-slider { position: absolute; z-index: 2; top: 2.5rem; left: 0; width: 2.5rem; height: 5.25rem; padding: 0; opacity: 0; pointer-events: none; transition: opacity .12s ease .04s; }
.control-surface:hover .control-slider, .control-surface:focus-within .control-slider { opacity: 1; pointer-events: auto; }
.control-slider span { display: none; }
.control-slider input { -webkit-appearance: none; appearance: none; position: absolute; left: calc(50% - 2.05rem); top: 1.57rem; width: 4.1rem; height: 2.1rem; min-width: 0; margin: 0; transform: rotate(-90deg); background: transparent; cursor: ns-resize; touch-action: none; }
.control-slider input::-webkit-slider-runnable-track { height: .24rem; border-radius: 999px; background: linear-gradient(90deg, rgba(191,224,163,.85) 0 var(--level, 62%), rgba(201,220,195,.13) var(--level, 62%) 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,.38), 0 0 8px rgba(190,225,159,.08); }
.control-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 1rem; height: .7rem; margin-top: -.23rem; border: 1px solid rgba(207,235,181,.32); border-radius: .35rem; background: linear-gradient(145deg, #a9c98e, #728d68); box-shadow: 0 2px 7px rgba(0,0,0,.48), inset 0 1px rgba(239,255,227,.28), 0 0 12px rgba(177,216,146,.14); }
.control-slider input::-moz-range-track { height: .34rem; border: 0; border-radius: 999px; background: rgba(218,234,214,.14); }
.control-slider input::-moz-range-progress { height: .34rem; border-radius: 999px; background: #d8efbd; }
.control-slider input::-moz-range-thumb { width: .7rem; height: 1rem; border: 1px solid rgba(207,235,181,.32); border-radius: .35rem; background: #8eaa78; box-shadow: 0 2px 7px rgba(0,0,0,.48); }
.mute-slash { opacity: 0; stroke: #dce9d4; stroke-width: 1.8; stroke-dasharray: 24; stroke-dashoffset: 24; transition: opacity .18s ease, stroke-dashoffset .25s cubic-bezier(.2,.8,.2,1); }
#soundButton[aria-pressed="false"] { opacity: .88; color: rgba(227,239,219,.7); background: rgba(234,244,228,.07); }
#soundButton[aria-pressed="false"] .mute-slash { opacity: 1; stroke-dashoffset: 0; }
#soundButton.muted-flash { animation: mute-flash .48s ease both; }
@keyframes mute-flash { 0%, 100% { box-shadow: none; } 38% { background: rgba(220,239,202,.15); box-shadow: 0 0 0 5px rgba(220,239,202,.06), 0 0 22px rgba(220,239,202,.18); } }
.apps-button { height: 2.5rem; display: flex; align-items: center; gap: .45rem; padding: 0 .65rem; border-radius: .75rem; color: rgba(240,246,235,.58); font-size: .65rem; }
.apps-button:hover { background: rgba(255,255,255,.065); color: rgba(240,246,235,.9); }
.apps-button svg { width: .9rem; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; }

.instrument { display: grid; place-items: center; min-height: 0; position: relative; cursor: text; }
.typing-input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; caret-color: transparent; }
.intro { position: absolute; text-align: center; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.intro.hidden { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.eyebrow { color: rgba(213,231,205,.42); letter-spacing: .22em; font-size: .62rem; margin: 0 0 1.4rem; }
h1 { margin: 0; font-weight: 390; letter-spacing: -.055em; font-size: clamp(3.1rem, 7vw, 6.8rem); line-height: .9; text-shadow: 0 3px 30px rgba(0,0,0,.2); }
.instruction { color: rgba(220,230,216,.42); font-size: .78rem; margin-top: 2rem; }
.phrase-wrap { display: flex; align-items: baseline; max-width: min(82vw, 68rem); overflow: hidden; padding: .45rem .3rem 1.75rem; opacity: 0; transition: opacity .5s ease; }
body.started .phrase-wrap { opacity: 1; }
.phrase { font-size: clamp(2.7rem, 7.3vw, 7rem); line-height: 1.1; letter-spacing: -.045em; white-space: pre; color: rgba(248,251,243,.98); text-shadow: 0 0 42px rgba(202,241,177,.16); user-select: text; -webkit-user-select: text; }
.phrase::selection, .phrase *::selection { background: rgba(205,232,177,.28); color: #f5f8ef; }
.phrase-letters { display: inline-block; }
.typed-letter { display: inline-block; opacity: calc(.28 + (1 - var(--age)) * .72); filter: blur(calc(var(--age) * .34px)); transform: translate3d(0, calc(var(--age) * .035em), 0) scale(calc(1 - var(--age) * .018)); text-shadow: 0 0 calc((1 - var(--age)) * 30px) rgba(210,245,183,.28); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1), filter .8s ease; }
.typed-letter.fresh { animation: letter-arrival .36s cubic-bezier(.2,.75,.25,1) both; }
@keyframes letter-arrival { 0% { opacity: 0; filter: blur(5px); transform: translate3d(.08em,.08em,0) scale(.9); } 100% { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) scale(1); } }
.phrase-wrap.clearing { opacity: 0; transform: scale(.985); transition: opacity .16s ease, transform .16s ease; }
.caret { height: clamp(2.7rem, 7.3vw, 7rem); width: 2px; background: #d9efbf; margin-left: .35rem; box-shadow: 0 0 14px #d9efbf; animation: blink 1.1s ease-in-out infinite; }
body.has-selection .caret { opacity: 0; animation: none; }
@keyframes blink { 50% { opacity: .15; } }
.note-readout { position: absolute; bottom: 13%; display: flex; gap: .65rem; align-items: baseline; opacity: 0; transition: opacity .4s; }
body.started .note-readout { opacity: 1; }
.note-name { font-size: .8rem; color: rgba(223,239,213,.8); }
.note-degree { font-size: .55rem; letter-spacing: .18em; color: rgba(223,239,213,.32); }

footer { display: flex; justify-content: space-between; align-items: center; color: rgba(218,230,211,.28); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; padding: .3rem .6rem; }
.footer-actions { display: flex; align-items: center; gap: 1rem; }
.space-control .control-surface { top: auto; bottom: 0; transform-origin: bottom center; }
.space-control .control-surface:hover, .space-control .control-surface:focus-within { background: linear-gradient(0deg, rgba(30,48,42,.88), rgba(8,18,16,.96)); }
.space-control .control-surface > .icon-button { top: auto; bottom: 0; }
.space-control .control-slider { top: auto; bottom: 2.5rem; }
.space-control .control-slider input { top: 1.57rem; }
.space-control-group { display: flex; align-items: center; gap: .5rem; }
.space-hint { margin: 0; color: rgba(218,230,211,.34); font-size: .56rem; letter-spacing: .08em; text-transform: none; white-space: nowrap; }
.space-volume-button { opacity: .72; }
.mini-spacebar { width: 1.62rem; height: .58rem; display: grid; place-items: center; border: 1px solid currentColor; border-top-color: rgba(233,244,226,.42); border-radius: .2rem .2rem .3rem .3rem; box-shadow: inset 0 -2px rgba(206,232,187,.08); font-size: .31rem; font-weight: 580; letter-spacing: .05em; line-height: 1; text-transform: uppercase; }
.footer-feedback { border: 0; padding: 0; background: transparent; color: rgba(218,230,211,.5); font: inherit; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.footer-feedback:hover { color: #d9edc1; }
.made-by { color: rgba(218,230,211,.38); font: inherit; font-size: .54rem; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; transition: color .18s ease; }
.made-by:hover, .made-by:focus-visible { color: #d9edc1; }
.hint { letter-spacing: .08em; text-transform: none; }
.keycap { border: 1px solid rgba(220,235,213,.12); padding: .18rem .4rem; border-radius: .3rem; margin-right: .3rem; }
.root-picker { position: fixed; z-index: 4; top: 5.3rem; right: 8rem; width: 12rem; padding: .5rem; border-radius: 1rem; grid-template-columns: repeat(3,1fr); gap: .2rem; }
.root-picker:not([hidden]) { display: grid; animation: pop .26s ease both; }
@keyframes pop { from { opacity: 0; transform: translateY(-5px) scale(.96); } }
.root-picker button { border: 0; border-radius: .6rem; background: transparent; padding: .65rem .2rem; font-size: .7rem; cursor: pointer; }
.root-picker button:hover { background: rgba(255,255,255,.07); }
dialog { border: 1px solid rgba(230,242,224,.13); border-radius: 1.5rem; max-width: 31rem; color: inherit; padding: 3.5rem; background: rgba(13,22,21,.84); backdrop-filter: blur(30px); box-shadow: 0 30px 100px rgba(0,0,0,.6); }
dialog::backdrop { background: rgba(0,5,5,.5); backdrop-filter: blur(8px); }
dialog h2 { font-size: 2.8rem; line-height: .98; letter-spacing: -.05em; font-weight: 420; margin: 0 0 1.5rem; }
dialog p { color: rgba(231,238,227,.52); font-size: .87rem; line-height: 1.7; }
dialog small { display: block; margin-top: 2.5rem; color: rgba(216,232,208,.3); font-size: .55rem; letter-spacing: .18em; }
.close { position: absolute; top: 1rem; right: 1rem; border: 0; background: rgba(255,255,255,.06); width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer; }
.library-link { width: 100%; margin-top: 1.5rem; padding: .9rem 0; display: flex; justify-content: space-between; border: 0; border-top: 1px solid rgba(230,242,224,.11); border-bottom: 1px solid rgba(230,242,224,.11); background: transparent; color: rgba(238,244,234,.8); font-size: .76rem; cursor: pointer; }
.library-link:hover { color: #e0efcf; }

.library-dialog { width: min(46rem, calc(100vw - 2rem)); max-width: 46rem; max-height: min(48rem, calc(100svh - 2rem)); padding: 0; overflow: hidden; }
.library-header { padding: 2.8rem 3rem 1.5rem; }
.library-header .large { margin-bottom: 1.5rem; }
.library-header .eyebrow { margin: 0 0 .7rem; }
.library-header h2 { margin-bottom: .6rem; }
.library-header > p:not(.eyebrow) { max-width: 31rem; margin: 0; }
#libraryCount { display: block; margin-top: 1.2rem; color: rgba(216,232,208,.3); font-size: .52rem; letter-spacing: .16em; }
.library-tools { padding: 0 3rem 1rem; }
.search-field { height: 2.7rem; display: flex; align-items: center; gap: .65rem; border-bottom: 1px solid rgba(230,242,224,.14); color: rgba(230,242,224,.4); }
.search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: rgba(245,248,239,.9); font: inherit; font-size: .8rem; }
.search-field input::placeholder { color: rgba(230,242,224,.28); }
.library-results { max-height: 18rem; overflow: auto; padding: .4rem 3rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(220,235,213,.14) transparent; }
.word-group { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid rgba(230,242,224,.07); }
.word-group h3 { margin: .15rem 0 0; font-size: .55rem; letter-spacing: .14em; font-weight: 500; color: rgba(213,231,205,.45); }
.word-group h3 span { display: block; margin-top: .3rem; opacity: .45; }
.mood-label { position: relative; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; cursor: help; }
.mood-label::after, .feeling-picker label::after { content: attr(data-tip); position: absolute; z-index: 8; left: 0; bottom: calc(100% + .55rem); width: 13rem; padding: .55rem .65rem; border: 1px solid rgba(230,242,224,.12); border-radius: .55rem; background: rgba(18,29,27,.96); color: rgba(239,245,235,.72); box-shadow: 0 8px 30px rgba(0,0,0,.3); font-size: .61rem; line-height: 1.45; letter-spacing: 0; text-transform: none; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; }
.mood-label:hover::after, .mood-label:focus-visible::after, .feeling-picker label:hover::after, .feeling-picker label:focus-within::after { opacity: 1; transform: translateY(0); }
.word-group p { margin: 0; color: rgba(235,241,231,.54); font-size: .74rem; line-height: 1.9; }
.word-group p span { white-space: nowrap; }
.word-group p i { margin: 0 .42rem; color: rgba(213,231,205,.18); font-style: normal; }
.word-group .custom-word { display: inline; border: 0; padding: 0; background: transparent; color: #d9edc1; font: inherit; text-shadow: 0 0 12px rgba(197,228,168,.22); cursor: pointer; }
.word-group .custom-word b { margin-left: .18rem; font-weight: 400; opacity: .35; }
.word-group .custom-word:hover b { opacity: 1; }
.empty-library { color: rgba(235,241,231,.4); font-size: .75rem; padding: 1rem 0 2rem; }
.add-word { display: grid; grid-template-columns: minmax(8rem,.7fr) minmax(19rem,1.4fr) auto; align-items: end; gap: .7rem; padding: 1.2rem 3rem; border-top: 1px solid rgba(230,242,224,.09); }
.add-word div { display: grid; gap: .4rem; }
.add-word > div > label, .field-label { color: rgba(213,231,205,.35); font-size: .53rem; letter-spacing: .12em; text-transform: uppercase; }
.add-word input, .add-word select { height: 2.35rem; border: 1px solid rgba(230,242,224,.11); border-radius: .65rem; padding: 0 .7rem; background: rgba(255,255,255,.04); color: rgba(245,248,239,.86); font: inherit; font-size: .72rem; outline: none; }
.add-word input:focus, .add-word select:focus { border-color: rgba(211,235,193,.45); }
.add-word button, .import-button { height: 2.35rem; display: grid; place-items: center; border: 0; border-radius: .65rem; padding: 0 1rem; background: #d7ebc0; color: #172016; font-size: .67rem; cursor: pointer; }
.feeling-picker { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: .2rem !important; height: 2.35rem; padding: .18rem; border: 1px solid rgba(230,242,224,.11); border-radius: .65rem; background: rgba(255,255,255,.025); }
.feeling-picker label { position: relative; display: grid; place-items: center; border-radius: .45rem; color: rgba(230,240,226,.38); font-size: .56rem; cursor: pointer; }
.feeling-picker input { position: absolute; opacity: 0; pointer-events: none; }
.feeling-picker label:has(input:checked) { background: rgba(215,235,192,.12); color: #dbeec5; box-shadow: inset 0 0 0 1px rgba(215,235,192,.12); }
.feeling-picker label::after { left: 50%; bottom: calc(100% + .6rem); transform: translate(-50%, 4px); }
.feeling-picker label:hover::after, .feeling-picker label:focus-within::after { transform: translate(-50%, 0); }
.import-row { min-height: 3.4rem; padding: .5rem 3rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.import-row p { margin: 0; color: rgba(213,231,205,.34); font-size: .62rem; }
.import-row p.error { color: #e4a8a1; }
.library-actions { display: flex; align-items: center; gap: .45rem; }
.import-button { height: 2rem; background: rgba(255,255,255,.06); color: rgba(240,246,235,.68); white-space: nowrap; }
.import-button input { display: none; }
.done-button { height: 2rem; border: 0; border-radius: .65rem; padding: 0 1rem; background: #d7ebc0; color: #172016; font: inherit; font-size: .67rem; cursor: pointer; }
.import-help { margin: 0 3rem 2rem; color: rgba(213,231,205,.3); font-size: .58rem; }
.import-help summary { cursor: pointer; }
.import-help code { display: block; margin-top: .6rem; color: rgba(221,237,212,.48); }
.apps-dialog { width: min(30rem, calc(100vw - 2rem)); padding: 3.2rem; }
.apps-dialog .large { margin-bottom: 1.6rem; }
.apps-dialog .eyebrow { margin-bottom: 1rem; }
.apps-dialog > p:not(.eyebrow) { margin: 0; max-width: 23rem; color: rgba(231,238,227,.5); font-size: .82rem; line-height: 1.65; }
.apps-form { margin-top: 2rem; }
.apps-form fieldset { padding: 0; border: 0; margin: 0 0 1rem; }
.apps-form legend, .email-field { display: block; margin-bottom: .5rem; color: rgba(213,231,205,.34); font-size: .53rem; letter-spacing: .12em; text-transform: uppercase; }
.platform-picker { height: 2.45rem; display: grid; grid-template-columns: repeat(3,1fr); gap: .2rem; padding: .18rem; border: 1px solid rgba(230,242,224,.11); border-radius: .7rem; background: rgba(255,255,255,.025); }
.platform-picker label { position: relative; display: grid; place-items: center; border-radius: .5rem; color: rgba(230,240,226,.38); font-size: .65rem; cursor: pointer; }
.platform-picker input { position: absolute; opacity: 0; }
.platform-picker label:has(input:checked) { background: rgba(215,235,192,.12); color: #dbeec5; box-shadow: inset 0 0 0 1px rgba(215,235,192,.12); }
.email-row { display: grid; grid-template-columns: 1fr auto; gap: .45rem; }
.email-row input { min-width: 0; height: 2.8rem; border: 1px solid rgba(230,242,224,.12); border-radius: .7rem; padding: 0 .8rem; background: rgba(255,255,255,.035); color: rgba(245,248,239,.9); font: inherit; font-size: .76rem; outline: none; }
.email-row input:focus { border-color: rgba(215,235,192,.5); }
.email-row button { border: 0; border-radius: .7rem; padding: 0 1rem; background: #d7ebc0; color: #172016; font: inherit; font-size: .7rem; cursor: pointer; }
.email-row button:disabled { opacity: .55; cursor: wait; }
.apps-message { min-height: 1rem; margin: .6rem 0 0; color: rgba(213,231,205,.3); font-size: .6rem; }
.apps-message.success { color: #d7ebc0; }
.apps-message.error { color: #e4a8a1; }
.feedback-dialog textarea, .feedback-email { width: 100%; border: 1px solid rgba(230,242,224,.12); border-radius: .7rem; padding: .8rem; background: rgba(255,255,255,.035); color: rgba(245,248,239,.9); font: inherit; font-size: .76rem; outline: none; }
.feedback-dialog textarea { min-height: 7rem; resize: vertical; }
.feedback-dialog textarea:focus, .feedback-email:focus { border-color: rgba(215,235,192,.5); }
.optional-label { margin-top: 1rem; }
.feedback-submit { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.feedback-submit .apps-message { margin: 0; }
.feedback-submit button { height: 2.6rem; flex: 0 0 auto; border: 0; border-radius: .7rem; padding: 0 1rem; background: #d7ebc0; color: #172016; font: inherit; font-size: .7rem; cursor: pointer; }
.feedback-submit button:disabled { opacity: .55; cursor: wait; }

@media (max-width: 640px) {
  main { padding: .75rem; }
  .topbar { height: 3.2rem; border-radius: 1rem; }
  .desktop-only { display: none; }
  footer { justify-content: center; }
  .hint { display: none; }
  .space-control .hint { display: block; }
  .root-picker { right: .9rem; top: 4.6rem; }
  dialog { padding: 2.5rem; margin: 1rem; }
  .library-dialog { padding: 0; margin: 1rem; }
  .apps-dialog { padding: 2.5rem 1.5rem; }
  .library-header { padding: 2.4rem 1.4rem 1.2rem; }
  .library-tools, .library-results { padding-inline: 1.4rem; }
  .word-group { grid-template-columns: 4rem 1fr; }
  .add-word { grid-template-columns: 1fr auto; padding-inline: 1.4rem; }
  .add-word div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .add-word > button { grid-column: 2; grid-row: 1; }
  .import-row { padding-inline: 1.4rem; }
  .import-row p { max-width: 8rem; }
  .import-help { margin-inline: 1.4rem; }
}
@media (max-width: 420px) {
  .topbar { padding-inline: .45rem; }
  .brand { gap: 0; padding-inline: .4rem; }
  .brand span:last-child { display: none; }
  .transport { gap: 0; }
  .divider { margin-inline: .1rem; }
  .mode-toggle { gap: .35rem; padding-inline: .3rem; }
  .icon-button { width: 2.25rem; }
  .apps-button { width: 2.25rem; padding: 0; justify-content: center; }
  .apps-button span { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (prefers-reduced-transparency: reduce) { .glass, dialog { backdrop-filter: none; background: #14201e; } }