/* Alegreya and Alegreya SC (SIL OFL 1.1, assets/fonts/OFL.txt), regular weight only. */
@font-face{font-family:'Alegreya';font-style:normal;font-weight:400;font-display:swap;src:url(./assets/fonts/alegreya-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:400;font-display:swap;src:url(./assets/fonts/alegreya-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:400;font-display:swap;src:url(./assets/fonts/alegreya-sc-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:400;font-display:swap;src:url(./assets/fonts/alegreya-sc-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:light;--paper:#fff;--ink:#000;
  /* Colour rule: only pure black #000 and pure white #fff, no greys or tints. */
  --serif:Alegreya,Georgia,"Times New Roman",serif;
  --small-caps:"Alegreya SC",Alegreya,Georgia,serif; /* Малая капитель: подписи групп */
  /* Seven text styles. Every text on the page uses one of them. */
  --type-title:400 28px/1.1 var(--serif);   /* Заголовок: имя кольца и змеи, заголовок окна */
  --type-line:400 16px/1.3 var(--serif);    /* Строка: строка заклинаний, выбор прикосновения, знаки ↵ и × */
  --type-body:400 14px/1.6 var(--serif);    /* Текст: абзацы окна, подписи и теги на телефоне */
  --type-caption:400 12px/1.5 var(--serif); /* Подпись: ползунки и значения, теги, списки, кнопки */
  --type-log:400 12px/2 var(--serif);       /* Лог: всё сказанное, справа */
  --type-small-caps:400 12px/1.5 var(--small-caps); /* Капитель: подписи групп */
  font:var(--type-body)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#fff;color:#000}
button,select,input{font:inherit;color:#000}
button{border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Focus is drawn only while the user moves with Tab / Shift+Tab. */
:focus,:focus-visible{outline:none}
*{-webkit-tap-highlight-color:transparent}
[data-modality="keyboard"] :is(button,canvas,select,input,summary,a,[tabindex]):focus-visible{outline:1px solid #000;outline-offset:5px}
[data-modality="keyboard"] canvas:focus-visible{outline-offset:-5px}
[data-modality="keyboard"] #spell-input:focus-visible{outline:0}
.instrument{position:fixed;inset:0;overflow:hidden;isolation:isolate;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.stage{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
#canvas{touch-action:none}
#ink-canvas{pointer-events:none}
.stage[data-hover="scratch"] #canvas{cursor:grab}
.stage[data-gesture="scratch"] #canvas{cursor:grabbing}
.ink-control{position:absolute;border-radius:50%;padding:0;touch-action:none;cursor:crosshair}
.minimap{position:absolute;z-index:5;padding:0;cursor:zoom-out;background:none}
.channel-panel{position:absolute;z-index:5;left:clamp(28px,3.2vw,64px);bottom:48px;width:clamp(280px,23vw,330px);height:480px;max-height:calc(100dvh - 160px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#000 #fff}
.channel-title{display:flex;gap:12px;align-items:baseline;margin-bottom:16px}
.channel-title>span{font:var(--type-caption)}
h2{font:var(--type-title);letter-spacing:-.6px;margin:0}
fieldset{border:0;margin:0 0 10px;background:none;padding:0;min-width:0}
fieldset:last-child{margin-bottom:0}
legend{float:left;width:100%;font:var(--type-small-caps);margin:0 0 4px;padding:0}
fieldset label{clear:both;display:grid;grid-template-columns:1fr auto;align-items:center;font:var(--type-caption);gap:0 12px}
fieldset label+label{margin-top:3px}
fieldset output{color:#000;font:var(--type-caption);font-variant-numeric:tabular-nums}
fieldset .choice-row{display:flex;justify-content:space-between;gap:15px;margin-bottom:5px}
select{border:0;background:transparent;border-bottom:1px solid #000;border-radius:0;font:var(--type-caption);padding:2px 14px 3px 0;max-width:180px}
input[type="range"]{grid-column:1/-1;width:100%;height:21px;margin:0;accent-color:#000;cursor:ew-resize;-webkit-appearance:none;background:none}
input[type="range"]::-webkit-slider-runnable-track{height:1px;background:#000}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;border-radius:50%;background:#000;margin-top:-4px}
input[type="range"]::-moz-range-track{height:1px;background:#000}
input[type="range"]::-moz-range-thumb{width:9px;height:9px;border:0;background:#000}
.spell-line{position:absolute;z-index:9;width:310px;max-width:calc(100vw - 40px);color:#000}
#spell-form{display:flex;border-bottom:1px solid #000;align-items:center}
#spell-input{width:100%;min-width:0;border:0;outline:0;background:transparent;font:var(--type-line);padding:4px 0 6px;border-radius:0}
#spell-input::placeholder{color:#000;opacity:1}
/* Desktop: a quiet line, no tags and no ↵ — Enter speaks. */
[data-mobile="false"] #spell-form button,[data-mobile="false"] .spell-lexicon{display:none}
#spell-form button{font:var(--type-line);min-width:44px;min-height:44px}
.spell-lexicon{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:6px;align-items:center;font:var(--type-caption)}
.spell-lexicon button{padding:5px 0;font:var(--type-caption)}
#spell-feedback{font:var(--type-caption);margin:8px 0 0;min-height:18px}
.phrase-choices{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:8px}
.phrase-choices button{padding:4px 0;font:var(--type-caption);border-bottom:1px solid transparent}
.phrase-choices button[aria-pressed="true"]{border-color:#000}
[data-mobile="true"] .channel-panel{left:50%;top:var(--controls-top,180px);bottom:auto;transform:translateX(-50%);width:min(310px,calc(100vw - 48px));height:var(--controls-height,350px);max-height:none;touch-action:pan-y;padding-bottom:12px}
[data-mobile="true"] .channel-panel label{font:var(--type-body)}
[data-mobile="true"] input[type="range"]{height:30px}
[data-mobile="true"] .spell-lexicon button{min-height:36px}
[data-mobile="true"] .spell-line{width:min(330px,calc(100vw - 40px))}
@media(max-height:520px){[data-mobile="true"] .spell-lexicon{display:none}}
dialog{background:transparent;color:#000;border:1px solid #000;padding:44px;max-width:min(530px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto}
dialog::backdrop{background:#fff}
dialog h2{font:var(--type-title);margin:0 0 28px}
dialog p{font:var(--type-body);color:#000}
.dialog-close{position:absolute;right:14px;top:8px;font:var(--type-line);padding:8px}
.scratch-choice{display:flex;gap:20px;margin-bottom:15px}
.scratch-choice button{font:var(--type-line);padding:5px 0;border-bottom:1px solid transparent;color:#000}
.scratch-choice button[aria-pressed="true"]{border-bottom-color:#000}
dialog .routing{font:var(--type-caption)}
details{margin:20px 0;font:var(--type-caption)}
summary{cursor:pointer;font:var(--type-small-caps)}
@media(max-width:850px){.channel-panel{bottom:40px;width:290px;left:28px}}
@media(max-width:600px){.channel-panel{bottom:30px;width:min(280px,70vw);max-height:calc(100dvh - 250px)}dialog{padding:40px 26px}fieldset{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

.spell-line[hidden]{display:none}
[data-view="focus"] .spell-lexicon{display:none}
.stage[data-hover="rune"] #canvas{cursor:pointer}
.channel-panel{padding:8px 10px 12px 8px}
.voice-panel{z-index:6}
.channel-title .panel-close{margin-left:auto;font:var(--type-line);min-width:36px;min-height:36px;padding:0}
.text-button{padding:6px 0;font:var(--type-caption);border-bottom:1px solid #000;margin-top:6px}
.spell-lexicon .lexicon-gap{width:100%;height:0}
[data-mobile="true"] .voice-panel{top:max(12px,env(safe-area-inset-top));height:min(46dvh,420px)}
[data-mobile="true"] .spell-lexicon{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:0 14px;margin-right:-20px;padding-right:20px;-webkit-overflow-scrolling:touch}
[data-mobile="true"] .spell-lexicon::-webkit-scrollbar{display:none}
[data-mobile="true"] .spell-lexicon button{flex:none;font:var(--type-body)}
[data-mobile="true"] .spell-lexicon .lexicon-gap{width:10px;flex:none}
[data-mobile="true"] #spell-feedback{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* The log: everything entered in the line, small and centred in the right
   column, one entry per line, ragged on both sides. Nothing clips it and
   nothing covers it: only the page background is white. */
.spell-log{position:absolute;z-index:4;pointer-events:none}
.spell-log[hidden]{display:none}
.spell-log p{margin:0;font:var(--type-log);text-align:center;overflow-wrap:anywhere}
.spell-log p span{display:block}
/* Desktop: nothing is written on the left; what was said goes to the log. */
[data-mobile="false"] #spell-feedback{display:none}
/* Desktop: the list of every command, under the line while it has focus. */
.command-list{display:none}
[data-mobile="false"] .spell-line:focus-within .command-list:not(:empty){display:block;padding:12px 0 16px}
.command-group{display:flex;flex-wrap:wrap;gap:0 12px;align-items:baseline;font:var(--type-caption)}
.command-group+.command-group{margin-top:6px}
.command-group span{flex:0 0 100%;font:var(--type-small-caps);margin-bottom:2px}
.command-group button{padding:3px 0;font:var(--type-caption)}