:root { --bg:#0f1419; --panel:#161d25; --panel-2:#1c252f; --border:#2a3440; --text:#e6e9ee; --muted:#9aa4b2; --gold:#d4a83a; --cream:#ece6d6; --buy:#3ecf8e; --sell:#f06a5f; --warn:#e3a33b; --blue:#5aa9e6; --violet:#a78bfa; }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--text); font:15px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif; }
  main { max-width:1080px; margin:0 auto; padding:0 16px 60px; }
  a { color:var(--gold); text-decoration:none; cursor:pointer; } a:hover { text-decoration:underline; }
  button { font:inherit; cursor:pointer; }
  header { position:sticky; top:0; z-index:5; background:rgba(15,20,25,.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--border); }
  .hwrap { max-width:1080px; margin:0 auto; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
  .brand { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text); }
  .mark { width:32px; height:32px; border-radius:8px; background:#2e2915; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; font-family:"Playfair Display", Georgia, serif; font-size:14px; color:var(--cream); }
  .mark span, .gold { color:var(--gold); }
  nav { display:flex; gap:14px; font-size:13.5px; flex-wrap:wrap; align-items:center; } nav a { color:var(--muted); } nav a.on { color:var(--text); }
  select.lang { background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:4px 8px; font:inherit; font-size:13px; }
  .hero { background:linear-gradient(135deg, #1d180a, #0f1419 65%); border:1px solid #3a3017; border-radius:18px; padding:34px 28px; margin:20px 0 24px; }
  .hero h1 { margin:0 0 8px; font-size:32px; font-family:"Playfair Display", Georgia, serif; line-height:1.25; } .hero p { margin:0; color:var(--muted); max-width:660px; }
  .stats { display:flex; gap:24px; margin-top:16px; flex-wrap:wrap; font-size:13px; color:var(--muted); } .stats b { color:var(--text); font-size:18px; display:block; }
  h2 { font-size:20px; margin:32px 0 6px; } .sub { color:var(--muted); font-size:13.5px; margin:0 0 14px; }
  .muted { color:var(--muted); font-size:13px; }
  .grid3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
  .card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px; }
  .card.click { cursor:pointer; } .card.click:hover { border-color:#4a3d1a; }
  .lv { display:flex; flex-direction:column; gap:6px; }
  .n { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; } .lv h3 { margin:0; font-size:17px; }
  .prog { height:6px; background:var(--panel-2); border-radius:6px; overflow:hidden; margin-top:auto; } .prog i { display:block; height:100%; }
  .chip { display:inline-block; font-size:11px; padding:1px 8px; border-radius:20px; border:1px solid var(--border); color:var(--muted); background:var(--panel-2); white-space:nowrap; }
  .b1 { color:var(--buy); } .b2 { color:var(--blue); } .b3 { color:var(--gold); } .bp { color:var(--violet); } .bc { color:var(--buy); }
  .lessons { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px; }
  .ls { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px 14px; display:flex; gap:12px; align-items:flex-start; }
  .ls.ready { cursor:pointer; } .ls.ready:hover { border-color:#4a3d1a; } .ls.soon { opacity:.55; }
  .num { width:28px; height:28px; border-radius:50%; background:var(--panel-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:12px; flex:none; }
  .num.ok { background:#12301f; border-color:#245a3d; color:var(--buy); }
  .ls b { font-size:14px; font-weight:600; display:block; line-height:1.4; }
  .track { border-radius:14px; padding:18px; border:1px solid var(--border); cursor:pointer; }
  .track.psy { background:linear-gradient(135deg, #1e1830, #161d25); border-color:#3b2f5e; } .track.cp { background:linear-gradient(135deg, #12261d, #161d25); border-color:#1f4a35; }
  .author { display:flex; gap:12px; align-items:center; }
  .av { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; font-size:17px; }
  .av.c { background:#2c2348; color:var(--violet); } .av.r { background:#14301f; color:var(--buy); } .av.x { background:#2a2414; color:var(--gold, #c9a227); }
  .row2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px; }
  .strat { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
  .st { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:13.5px; cursor:pointer; } .st:hover { border-color:#4a3d1a; }
  .warn { color:var(--warn); font-size:12px; }
  .tools { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px; }
  .tool { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px; font-size:13.5px; text-align:center; cursor:pointer; } .tool:hover { border-color:#4a3d1a; }
  .tool .i { font-size:22px; display:block; }
  .tg { background:linear-gradient(135deg, #10283b, #161d25); border:1px solid #23435e; border-radius:14px; padding:18px; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:30px; }
  .btn { display:inline-block; background:var(--gold); color:#111; border-radius:8px; padding:8px 14px; font-weight:700; font-size:13px; border:0; }
  .btn.ghost { background:var(--panel-2); color:var(--text); border:1px solid var(--border); font-weight:500; }
  .notice { margin-top:30px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--border); padding-top:14px; }
  /* lesson */
  .lesson { display:grid; grid-template-columns:minmax(0, 1fr) 260px; gap:28px; margin-top:20px; }
  .crumb { font-size:12.5px; color:var(--muted); margin-bottom:8px; }
  .lesson h1, .page h1 { font-family:"Playfair Display", Georgia, serif; font-size:30px; margin:0 0 8px; line-height:1.25; }
  .meta { display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-bottom:16px; align-items:center; }
  .byline { display:flex; gap:20px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:20px; font-size:13px; }
  article h2 { font-size:19px; margin:28px 0 8px; }
  .box { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin:14px 0; }
  .box.key { border-inline-start:4px solid var(--gold); } .box.mist { border-inline-start:4px solid var(--sell); } .box.copy { border-inline-start:4px solid var(--buy); }
  .box.tr { border-inline-start:4px solid var(--blue); font-size:13px; }
  .box ul, article ul, article ol { padding-inline-start:20px; }
  table.t { width:100%; border-collapse:collapse; font-size:13.5px; margin:10px 0; } .t td, .t th { padding:7px 8px; border-bottom:1px solid var(--border); text-align:start; } .t th { color:var(--muted); font-weight:500; }
  .neg { color:var(--sell); }
  .calc { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
  .calc label { font-size:12.5px; color:var(--muted); display:block; }
  .calc input, .calc select { width:100%; background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:8px 10px; font:inherit; margin-top:4px; }
  .res { margin-top:12px; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
  .res div { background:var(--panel-2); border-radius:10px; padding:10px; font-size:12.5px; color:var(--muted); } .res b { display:block; color:var(--text); font-size:20px; }
  .q { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px; margin:10px 0; }
  .opt { display:block; width:100%; text-align:start; background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:8px 10px; margin-top:6px; }
  .opt.right { border-color:var(--buy); color:var(--buy); } .opt.wrong { border-color:var(--sell); color:var(--sell); }
  .side { position:sticky; top:76px; align-self:start; display:flex; flex-direction:column; gap:12px; }
  .side .box { margin:0; font-size:13px; }
  .pager { display:flex; justify-content:space-between; gap:10px; margin-top:28px; flex-wrap:wrap; } .pager a { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:10px 14px; font-size:13px; max-width:48%; }
  figure { margin:14px 0; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px; } figure svg { width:100%; height:auto; display:block; } figcaption { font-size:12px; color:var(--muted); margin-top:6px; }
  svg text { font-family:system-ui, sans-serif; }
  .rules { display:grid; grid-template-columns:140px 1fr; gap:6px 14px; font-size:14px; } .rules b { color:var(--gold); font-weight:600; }
  .gl { display:grid; grid-template-columns:minmax(150px, 220px) 1fr; gap:4px 16px; } .gl > div { padding:9px 0; border-bottom:1px solid var(--border); font-size:14px; }
  .letters { display:flex; flex-wrap:wrap; gap:4px; margin:10px 0; } .letters a { width:28px; text-align:center; background:var(--panel); border:1px solid var(--border); border-radius:6px; font-size:13px; }
  input.search { width:100%; max-width:420px; background:var(--panel); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:10px 12px; font:inherit; }
  .cert { background:#fbf8f0; color:#1d1a10; border-radius:12px; padding:40px 30px; text-align:center; border:10px double #c9a032; position:relative; }
  .cert h1 { font-family:"Playfair Display", Georgia, serif; color:#2e2915; margin:6px 0; } .cert .nm { font-family:"Playfair Display", Georgia, serif; font-size:30px; border-bottom:1px solid #c9a032; display:inline-block; padding:0 20px 4px; margin:14px 0; min-width:260px; }
  .cert .wm { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:70px; font-weight:800; color:rgba(201,160,50,.18); transform:rotate(-18deg); pointer-events:none; }
  @media (max-width:820px) { .lesson { grid-template-columns:1fr; } .side { position:static; } .rules, .gl { grid-template-columns:1fr; } .rules b { margin-top:6px; } }
  @media print { header, .noprint { display:none !important; } body { background:#fff; } }
  /* account boxes */
  .box.acc .btn { margin:2px 4px 2px 0; } a.box.cont { display:block; color:var(--text); text-decoration:none; border-color:#4a3d1a; background:linear-gradient(135deg, #1d180a, #161d25); } a.box.cont:hover { border-color:var(--gold); }
  .certcard { margin-top:20px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
  .vtable { display:grid; grid-template-columns:170px 1fr; gap:6px 14px; margin-top:14px; } .vtable span { color:var(--muted); }
  /* certificate (A4 landscape) */
  .gcert { position:relative; width:100%; max-width:1000px; aspect-ratio:297/210; margin:0 auto; background:#fbf7ec; color:#2b2416; container-type:inline-size; border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,.5); overflow:hidden; direction:ltr; }
  .gcert .bg { position:absolute; inset:0; background:radial-gradient(circle at 50% 46%, rgba(212,168,58,.10), transparent 55%), repeating-linear-gradient(45deg, rgba(43,36,22,.018) 0 2px, transparent 2px 6px); }
  .gcert .frame { position:absolute; inset:2.2cqw; border:.35cqw solid var(--lv); } .gcert .frame2 { position:absolute; inset:3cqw; border:.12cqw solid #b89a4f; }
  .gcert .corner { position:absolute; width:5cqw; height:5cqw; border:.35cqw solid var(--lv); }
  .gcert .c1 { top:1.3cqw; left:1.3cqw; border-right:0; border-bottom:0; } .gcert .c2 { top:1.3cqw; right:1.3cqw; border-left:0; border-bottom:0; }
  .gcert .c3 { bottom:1.3cqw; left:1.3cqw; border-right:0; border-top:0; } .gcert .c4 { bottom:1.3cqw; right:1.3cqw; border-left:0; border-top:0; }
  .gcert .in { position:absolute; inset:5cqw 7cqw 5.6cqw; display:flex; flex-direction:column; align-items:center; text-align:center; }
  .gcert .brandrow { display:flex; align-items:center; gap:1.2cqw; }
  .gcert .mk { width:4.6cqw; height:4.6cqw; border-radius:.9cqw; background:#2e2915; border:.3cqw solid #d4a83a; display:flex; align-items:center; justify-content:center; font-family:"Playfair Display", Georgia, serif; font-weight:700; font-size:2.2cqw; color:#f4ecd6; } .gcert .mk span { color:#d4a83a; }
  .gcert .brandtxt { font-size:1.35cqw; letter-spacing:.5cqw; font-weight:700; color:#6a5a30; }
  .gcert .title { font-family:"Playfair Display", Georgia, serif; font-size:4.6cqw; margin:2.2cqw 0 0; line-height:1.1; letter-spacing:.1cqw; }
  .gcert .lvband { margin-top:1cqw; font-size:1.25cqw; letter-spacing:.35cqw; text-transform:uppercase; color:#fff; background:var(--lv); padding:.4cqw 1.8cqw; border-radius:3cqw; font-weight:700; }
  .gcert .certifies { margin-top:2.2cqw; font-size:1.45cqw; color:#5d5235; font-style:italic; font-family:"Playfair Display", Georgia, serif; }
  .gcert .name { font-family:"Great Vibes", "Playfair Display", cursive; font-size:6.4cqw; line-height:1.15; margin:.4cqw 0 0; color:#1d1a12; }
  .gcert .rule { width:44cqw; height:.12cqw; background:linear-gradient(90deg, transparent, #b89a4f, transparent); margin:.3cqw 0 1.2cqw; }
  .gcert .what { font-size:1.55cqw; max-width:66cqw; line-height:1.55; color:#3a3222; } .gcert .what b { color:#2b2416; }
  .gcert .facts { display:flex; gap:3.2cqw; margin-top:1.6cqw; font-size:1.15cqw; color:#5d5235; } .gcert .facts b { display:block; font-size:1.7cqw; color:#2b2416; font-family:"Playfair Display", Georgia, serif; }
  .gcert .foot { margin-top:auto; width:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:2cqw; }
  .gcert .sig { text-align:center; } .gcert .sig .s { font-family:"Great Vibes", cursive; font-size:3.4cqw; line-height:1; color:#1d1a12; }
  .gcert .sig .ln { height:.1cqw; background:#8a7a45; margin:.4cqw 2cqw .5cqw; } .gcert .sig .r { font-size:1.08cqw; color:#5d5235; line-height:1.35; } .gcert .sig .r b { color:#2b2416; }
  .gcert .seal { width:11cqw; height:11cqw; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; background:radial-gradient(circle at 35% 30%, #f0d68a, #c99a2e 55%, #8a6a1c); box-shadow:0 .3cqw .8cqw rgba(0,0,0,.25), inset 0 0 0 .5cqw rgba(255,255,255,.18); }
  .gcert .seal::before { content:""; position:absolute; inset:.9cqw; border-radius:50%; border:.15cqw dashed rgba(60,45,10,.55); }
  .gcert .seal .t { text-align:center; color:#3d2f0c; font-weight:800; font-size:1cqw; letter-spacing:.15cqw; line-height:1.2; } .gcert .seal .t big { display:block; font-family:"Playfair Display", Georgia, serif; font-size:2.6cqw; letter-spacing:0; }
  .gcert .idrow { position:absolute; left:0; right:0; bottom:3.6cqw; text-align:center; font-size:.95cqw; color:#7a6a3e; }
  .gcert .qr { position:absolute; right:4.4cqw; top:4.2cqw; width:7.6cqw; text-align:center; font-size:.8cqw; color:#7a6a3e; line-height:1.25; } .gcert .qr svg { width:100%; height:auto; display:block; background:#fff; padding:.3cqw; border-radius:.4cqw; }
  .gcert.l1 { --lv:#2e8b62; } .gcert.l2 { --lv:#2f6fa8; } .gcert.l3 { --lv:#a07a1c; } .gcert.grad { --lv:#1f2a36; }
  @media print { @page { size:A4 landscape; margin:0; } .notice, .crumb { display:none !important; } main { padding:0 !important; max-width:none !important; } .page { margin:0 !important; max-width:none !important; } .gcert { box-shadow:none; max-width:none; border-radius:0; } }