/* SpeakSlava · Paste & Hear · look v4 · 2026-10-01 (v4: learning text 17 px or more) · look v1 · 2026-09-26 — the family colours: cream, navy, flag blue, gold. */
:root{
  --ph-bg:#F6F2E8; --ph-card:#FFFDF7; --ph-ink:#1F3447; --ph-muted:#526577; --ph-line:#D9D0BD;
  --ph-navy:#203B51; --ph-blue:#0057B7; --ph-blue-tint:#E4EDF8; --ph-gold:#F2C744; --ph-gold-deep:#B47700; --ph-gold-ink:#2A2104;
  --ph-quiet:#8A97A3; --ph-seg:#E8E1D1;
  --ph-uk: var(--ss-font-slot-ukrainian, "Andika", "Noto Sans", system-ui, sans-serif);
  --ph-ui: var(--ss-font-slot-ui, "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
  --ph-en: var(--ss-font-slot-natural, "Noto Sans", system-ui, sans-serif);
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ph-bg);color:var(--ph-ink)}
body{font-family:var(--ph-ui);font-size:16px;line-height:1.5;padding:0 16px 40px}
button,select,textarea,input{font-family:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid var(--ph-blue);outline-offset:2px}
[hidden]{display:none!important}

.phTop{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 8px}
.phBrand{display:flex;align-items:center;gap:12px;min-width:0}
.phBrand img{height:64px;width:auto;display:block}
.phTitle{display:flex;flex-direction:column;line-height:1.15}
.phTitle h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.01em}
.phTitle span{font-size:17px;color:var(--ph-muted);font-family:var(--ph-uk)}
.phTopBtns{display:flex;gap:8px}
.topBtn{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--ph-line);background:var(--ph-card);font-size:15px;font-weight:700}

.phWrap{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.card{background:var(--ph-card);border:1px solid var(--ph-line);border-radius:18px;padding:16px}

/* editor */
.phEditor{display:flex;flex-direction:column;gap:10px}
.phEditor label{font-weight:800;font-size:16px}
.phHint{margin:0;color:var(--ph-muted);font-size:14px}
#phText{width:100%;min-height:220px;resize:vertical;border:2px solid var(--ph-blue);border-radius:14px;background:#fff;padding:14px;font-family:var(--ph-uk);font-size:20px;line-height:1.55}
.edRow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btnMain{min-height:52px;padding:0 22px;border-radius:14px;border:0;background:var(--ph-navy);color:#fff;font-size:17px;font-weight:800}
.btnSoft{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--ph-line);background:#fff;font-size:15px;font-weight:700}
.saveRow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--ph-line);padding-top:12px}
.saveRow input{min-height:44px;flex:1 1 200px;border:1px solid var(--ph-line);border-radius:12px;padding:0 12px;font-size:15px;background:#fff}
#phSaveNote{font-size:14px;color:var(--ph-muted);min-height:1.2em;margin:0}
.scripts{display:flex;flex-direction:column;gap:6px}
.scriptRow{display:flex;gap:6px}
.scriptOpen{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px;padding:0 12px;border-radius:12px;border:1px solid var(--ph-line);background:#fff;text-align:left}
.scriptName{font-weight:700}
.scriptMeta{font-size:13px;color:var(--ph-muted)}
.scriptDel{min-height:48px;padding:0 12px;border-radius:12px;border:1px solid var(--ph-line);background:#fff;font-size:14px;font-weight:700;color:#8a2a2a}

/* practice area */
.phGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:1040px){.phGrid{grid-template-columns:280px minmax(0,1fr) 330px;align-items:start}}
.phLinesCard{padding:12px 10px}
.phLinesCard h2{margin:0 0 6px;padding:0 6px;font-size:15px}
#phLines{display:flex;flex-direction:column;gap:2px;max-height:460px;overflow:auto}
.lineBtn{display:flex;gap:8px;align-items:baseline;text-align:left;min-height:44px;padding:6px 8px;border:0;border-radius:10px;background:transparent;font-size:17px}
.lineBtn.on{background:var(--ph-blue-tint);font-weight:600}
.lineNo{color:var(--ph-muted);font-size:13px;min-width:1.6em;font-variant-numeric:tabular-nums}
.lineUk{font-family:var(--ph-uk)}
@media (max-width:1039px){.phLinesCard{display:none}}

.phMain{display:flex;flex-direction:column;gap:12px;min-width:0}
.lineBar{display:flex;align-items:center;justify-content:space-between;background:var(--ph-card);border:1px solid var(--ph-line);border-radius:14px;padding:0 4px}
.lineBar button{width:48px;height:48px;border:0;background:transparent;font-size:24px;line-height:1;color:var(--ph-ink)}
.lineBar button:disabled{opacity:.3;cursor:default}
#phLineLabel{font-weight:700;font-size:15px}

.segs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:var(--ph-seg);border-radius:14px;padding:4px}
.seg{min-height:50px;padding:4px 6px;border:0;border-radius:10px;background:transparent;color:#3E4C59;font-size:14px;font-weight:700;line-height:1.2}
.seg[aria-pressed="true"]{background:var(--ph-card);color:var(--ph-ink);box-shadow:0 1px 3px rgba(31,52,71,.2)}
.dirs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dir{min-height:46px;border-radius:12px;border:2px solid var(--ph-line);background:var(--ph-card);font-size:15px;font-weight:700}
.dir[aria-pressed="true"]{background:var(--ph-navy);border-color:var(--ph-navy);color:#fff}
.sylRow{display:flex;flex-wrap:wrap;gap:6px}

.stage{background:var(--ph-card);border:1px solid var(--ph-line);border-radius:20px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;min-height:330px}
.stageTop{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px}
#phStepLabel{font-size:14px;font-weight:700;color:var(--ph-muted)}
#phSpace{font-size:12px;font-weight:700;color:var(--ph-blue);background:var(--ph-blue-tint);border-radius:999px;padding:3px 10px}
#phContext{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;font-family:var(--ph-uk);font-size:17px}
.ctxWord{color:var(--ph-quiet);background:none;border:0;padding:2px 2px;font:inherit}
button.ctxWord{min-height:44px;border-bottom:2px dotted var(--ph-line);border-radius:4px}
.ctxWord.on{color:var(--ph-blue);font-weight:600}
#phBig{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;min-height:180px;text-align:center}
.bigRow{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:12px 18px}
.bigCell{display:flex;flex-direction:column;align-items:center;gap:6px}
.bigUk{font-family:var(--ph-uk);font-weight:500;line-height:1.15;color:var(--ph-ink)}
.bigGloss{font-family:var(--ph-en);color:var(--ph-muted);font-size:17px}
.size1 .bigUk{font-size:clamp(44px,9vw,72px)} .size2 .bigUk{font-size:clamp(32px,6.5vw,50px)}
.size3 .bigUk{font-size:clamp(26px,5vw,38px)} .size4 .bigUk{font-size:clamp(22px,4vw,30px)}
.size3 .bigGloss,.size4 .bigGloss{font-size:17px}
.bigSyl{font-family:var(--ph-uk);font-size:clamp(40px,8vw,64px);font-weight:500;line-height:1.15}
.bigSyl.whole{color:var(--ph-blue)}
.phEmpty{color:var(--ph-muted);font-size:17px;margin:0}
#phEnglish{font-family:var(--ph-en);font-size:17px;text-align:center;border-top:1px solid #ECE5D6;padding-top:8px;margin:0}
.stepsRow{display:flex;justify-content:space-between;align-items:center;gap:8px}
.stepBtn{min-height:46px;padding:0 16px;border-radius:12px;border:1px solid var(--ph-line);background:#fff;font-size:15px;font-weight:700}
.stepBtn.pulse{border-color:var(--ph-blue);box-shadow:0 0 0 3px var(--ph-blue-tint);color:var(--ph-blue)}
#phDots{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.dot{width:8px;height:8px;border-radius:4px;background:#CFC6B4}
.dot.on{width:18px;background:var(--ph-blue)}

.playBar{display:flex;gap:10px;align-items:stretch}
#phPlay{flex:1;min-height:62px;border:0;border-radius:16px;background:var(--ph-gold);color:var(--ph-gold-ink);font-size:21px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
#phPlay .icoPause{display:none} #phPlay.isPlaying .icoPlay{display:none} #phPlay.isPlaying .icoPause{display:inline}
#phStop{min-width:96px;min-height:62px;border-radius:16px;border:1px solid var(--ph-line);background:var(--ph-card);font-size:17px;font-weight:800}
#phStatus{margin:0;text-align:center;font-size:14px;color:var(--ph-muted);min-height:1.4em}

.phSide{display:flex;flex-direction:column;gap:14px}
.set{display:flex;flex-direction:column;gap:8px}
.set + .set{border-top:1px solid #ECE5D6;padding-top:12px}
.set h3{margin:0;font-size:15px;font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:44px;padding:0 13px;border-radius:999px;border:1px solid var(--ph-line);background:#fff;font-size:14px;font-weight:700}
.chip[aria-pressed="true"]{background:var(--ph-blue);border-color:var(--ph-blue);color:#fff}
.set.voiceRow{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
#phVoice{min-height:44px;border-radius:12px;border:1px solid var(--ph-line);background:#fff;padding:0 12px;font-size:16px;font-weight:700}
.toggle{min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--ph-line);background:#fff;font-size:14px;font-weight:700}
.toggle[aria-pressed="true"]{background:var(--ph-navy);border-color:var(--ph-navy);color:#fff}
.phMore summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center}
.phMore p{font-size:14px;color:var(--ph-muted);margin:6px 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media (max-width:560px){
  .phTop{flex-wrap:wrap;gap:8px}
  .phBrand img{height:48px}
  .phTitle h1{font-size:20px}
  .topBtn{min-height:44px;padding:0 12px;font-size:14px}
  .seg{font-size:13px}
}