:root{--bg:#f6f2ee;--ink:#171411;--muted:#70665d;--panel:#fffaf4;--line:#241f1a;--accent:#f6b8da;--accent2:#bde9ff;--shadow:0 18px 55px rgba(23,20,17,.16);--header:74px;--footer:76px}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 15% 10%,#fff 0,#fff0 28%),linear-gradient(135deg,var(--bg),#efe7df);color:var(--ink)}.app{height:100dvh;display:grid;grid-template-rows:var(--header) minmax(0,1fr) var(--footer);padding:14px;gap:10px}.shell{border:2px solid var(--line);background:rgba(255,250,244,.82);box-shadow:0 8px 24px rgba(23,20,17,.08);backdrop-filter:blur(10px)}header.shell,footer.shell{border-radius:22px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;min-height:0}.brand{display:flex;align-items:center;gap:12px;min-width:0}.logo{width:40px;height:40px;border:2px solid var(--line);border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-weight:900;letter-spacing:-.08em}.title-block{min-width:0}.title-block h1{font-size:clamp(16px,2.2vw,24px);line-height:1;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title-block p{font-size:12px;color:var(--muted);margin:4px 0 0}.meta{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}.content-window{min-height:0;overflow:hidden;border-radius:28px;position:relative}.card{height:100%;min-height:0;display:grid;grid-template-columns:minmax(210px,42%) minmax(0,1fr);gap:18px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,250,244,.92))}.art-panel,.text-panel{min-height:0;border:2px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}.art-panel{display:grid;place-items:center;padding:clamp(10px,2.5vh,24px);background:linear-gradient(135deg,#fff,#fff7fb)}.art-panel img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain}.text-panel{display:flex;flex-direction:column}.text-head{padding:18px 20px 10px;border-bottom:2px solid rgba(23,20,17,.12);flex:0 0 auto}.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800;margin:0 0 8px}.text-head h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(25px,4.2vw,48px);line-height:.98;margin:0;letter-spacing:-.045em}.text-body{padding:14px 20px 20px;overflow:auto;min-height:0;scrollbar-width:thin}.text-body p{font-size:clamp(15px,1.45vw,19px);line-height:1.55;margin:0 0 1em}.text-body p:last-child{margin-bottom:0}.controls{display:flex;align-items:center;gap:10px}.btn{border:2px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;font-weight:800;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--line);transform:translateY(-1px)}.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--line)}.btn:disabled{opacity:.42;cursor:not-allowed}.progress-wrap{display:flex;align-items:center;gap:12px;min-width:min(44vw,520px)}.progress{height:12px;border:2px solid var(--line);border-radius:999px;overflow:hidden;background:#fff;flex:1}.bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s ease}.counter{font-weight:800;white-space:nowrap}.source{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28vw}@media(max-width:760px){:root{--header:86px;--footer:92px}.app{padding:10px;gap:8px}.card{grid-template-columns:1fr;grid-template-rows:minmax(120px,38%) minmax(0,1fr);gap:10px;padding:10px}.text-head{padding:14px 15px 8px}.text-body{padding:11px 15px 15px}.art-panel{padding:9px}.meta{display:none}.progress-wrap{min-width:0;flex:1}.source{display:none}.btn{padding:9px 11px}.title-block h1{font-size:17px}.title-block p{font-size:11px}}@media(max-height:560px){:root{--header:58px;--footer:62px}.title-block p,.meta,.source{display:none}.text-head h2{font-size:clamp(20px,4vw,33px)}.text-body p{font-size:14px;line-height:1.42}.card{padding:10px}.text-head{padding:12px 14px 7px}.text-body{padding:10px 14px 14px}}