:root{--navy:#12213f;--blue:#2563eb;--cyan:#0ea5c6;--ink:#162033;--muted:#6b7280;--line:#dbe3ef;--paper:#fff;--bg:#edf3f9;--key:#f8fafc;--danger:#b42318;--shadow:0 18px 50px rgba(18,33,63,.10)}*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:radial-gradient(circle at 85% 5%,#dceaff 0,transparent 28%),var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Myanmar",sans-serif;min-height:100vh}.app-shell{min-height:100vh}.topbar{height:78px;background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1180px)/2));box-shadow:0 5px 20px rgba(8,18,38,.2)}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand-mark{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:12px;background:linear-gradient(145deg,#1e3a6d,#142548);font-size:1.55rem;font-weight:700}.brand-logo{width:50px;height:50px;object-fit:cover;border-radius:50%;border:2px solid rgba(255,255,255,.8);background:white;box-shadow:0 3px 12px rgba(0,0,0,.2)}.brand strong,.brand small{display:block}.brand strong{font-size:1.05rem;letter-spacing:.01em}.brand small{font-size:.75rem;color:#a9b9d4;margin-top:2px}.status{display:flex;align-items:center;gap:8px;color:#cbd5e1;font-size:.85rem}.status span{width:8px;height:8px;border-radius:50%;background:#37d69a;box-shadow:0 0 0 4px rgba(55,214,154,.12)}.workspace{max-width:1180px;margin:0 auto;padding:48px 24px 36px}.workspace-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.eyebrow{color:var(--cyan);font-size:.75rem;font-weight:800;letter-spacing:.16em;margin:0 0 5px}.workspace h1{font-size:clamp(1.75rem,4vw,2.6rem);letter-spacing:-.04em;line-height:1;margin:0}.hint{color:var(--muted);font-size:.9rem;margin:0 0 4px}.editor-card,.keyboard-card{background:var(--paper);border:1px solid rgba(203,213,225,.85);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.editor-card{margin-bottom:22px}textarea{width:100%;min-height:245px;resize:vertical;border:0;outline:0;padding:26px 28px;font-family:"Noto Sans Myanmar","Myanmar Text",Padauk,sans-serif;font-size:1.65rem;line-height:1.8;color:#111827;background:white}textarea::placeholder{color:#aab3c0}.editor-footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px 12px 20px;background:#fbfdff}.editor-footer>span{font-size:.82rem;color:var(--muted)}.actions{display:flex;gap:8px;align-items:center}.button{border:0;border-radius:9px;min-height:40px;padding:0 14px;font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;transition:.16s transform,.16s background,.16s box-shadow}.button:active{transform:translateY(1px)}.ghost{background:#eef3f8;color:#364152}.ghost:hover{background:#e2e8f0}.danger{color:var(--danger);background:#fff0ee}.danger:hover{background:#ffe4e1}.primary{color:white;background:linear-gradient(135deg,#2563eb,#1687d6);box-shadow:0 6px 14px rgba(37,99,235,.22)}.primary:hover{box-shadow:0 8px 18px rgba(37,99,235,.3)}.keyboard-card{padding:18px}.keyboard-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.mode-switch{display:flex;background:#edf2f7;padding:4px;border-radius:10px}.mode-switch button,.layout-note{font:inherit;border:0;cursor:pointer}.mode-switch button{font-size:.8rem;font-weight:700;padding:7px 13px;border-radius:7px;color:#64748b;background:transparent}.mode-switch .active{color:#173868;background:white;box-shadow:0 2px 7px rgba(15,23,42,.12)}.layout-note{background:transparent;color:#64748b;font-size:.8rem}.guide{padding:10px 12px;background:#eff8ff;color:#34506c;border-radius:9px;font-size:.82rem;margin:-6px 0 14px}.keyboard{display:flex;flex-direction:column;gap:8px;overflow-x:auto;padding-bottom:2px}.key-row{display:flex;justify-content:center;gap:7px;min-width:740px}.key{position:relative;min-width:62px;height:60px;flex:1;max-width:86px;border:1px solid #cbd5e1;border-bottom-width:3px;border-radius:10px;background:linear-gradient(#fff,#f3f6fa);color:#13203a;cursor:pointer;font-family:"Noto Sans Myanmar","Myanmar Text",Padauk,sans-serif;font-size:1.5rem;font-weight:600;box-shadow:0 2px 4px rgba(15,23,42,.05);transition:.1s}.key:hover{border-color:#8da4c0;background:#f5f9ff}.key:active,.key.pressed{transform:translateY(2px);border-bottom-width:1px;background:#e8f2ff}.key small{position:absolute;top:4px;left:7px;color:#7b8797;font:600 .62rem Inter,ui-sans-serif,sans-serif}.key.wide{max-width:140px;flex:1.6;font-family:Inter,ui-sans-serif,sans-serif;font-size:.8rem;color:#526075}.key.space{max-width:430px;flex:5}.privacy{text-align:center;color:#778396;font-size:.78rem;margin:20px 0 0}.privacy span{color:#25b681;margin-right:5px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);padding:12px 18px;border-radius:10px;background:#12213f;color:white;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 10px 30px rgba(0,0,0,.2);font-size:.88rem}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:720px){.brand-logo{width:44px;height:44px}.brand strong{font-size:.9rem}.topbar{height:68px;padding:0 18px}.status{display:none}.workspace{padding:30px 14px 28px}.workspace-heading{display:block}.hint{margin-top:9px}.editor-footer{align-items:flex-start;padding:12px;flex-direction:column}.actions{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.actions .primary{grid-column:span 3}.actions #undo{display:none}textarea{min-height:220px;padding:20px;font-size:1.45rem}.keyboard-card{padding:14px 10px}.key-row{justify-content:flex-start;min-width:680px}.key{min-width:55px;height:56px}.button{padding:0 8px}.keyboard-top{padding:0 4px}.layout-note{font-size:.75rem}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
body::before,body::after{content:"";position:fixed;top:78px;bottom:0;width:clamp(150px,18vw,260px);background:url("logo.png") center/contain no-repeat;opacity:.09;pointer-events:none;z-index:0}body::before{left:18px}body::after{right:18px}.app-shell{position:relative;z-index:1}@media(max-width:900px){body::before,body::after{display:none}}