:root { color-scheme:dark; --background:#0a0b26; --surface:#141637; --primary:hsl(198 100% 43%); --ink:#f8f9ff; --muted:#a7afca; --gold:#f2c36c; --blue:#72cff2; font-family:Geist,"Segoe UI",system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--background); color:var(--ink); }
button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.calculator { max-width:860px; margin:auto; padding:18px 20px 12px; }
.brand-row,.brand { display:flex; align-items:center; gap:15px; }
.brand-row { justify-content:space-between; margin-bottom:16px; }
.brand-logo { display:block; width:132px; height:auto; }
.brand>span:last-child { font-size:10px; color:var(--muted); letter-spacing:1.7px; }
.brand b { color:var(--ink); font-size:14px; padding-left:5px; }
.divider { width:1px; height:23px; background:#34364f; }
#help-toggle { border:1px solid #34364f; border-radius:50%; width:25px; height:25px; background:transparent; color:var(--muted); font-size:13px; }
.display-panel { position:relative; background:linear-gradient(110deg,#dce8e2,#cadbd4); color:#18332a; border:1px solid #eff6f1; border-radius:9px; padding:9px 17px 8px; box-shadow:inset 0 2px 6px #0a20161f; }
.indicators { display:flex; gap:15px; min-height:14px; font-size:9px; font-weight:700; letter-spacing:.8px; }
#display { display:block; min-height:47px; font:500 clamp(25px,6vw,39px)/1.2 "Consolas","SFMono-Regular",monospace; text-align:right; letter-spacing:1px; padding-top:3px; white-space:nowrap; }
#display-hint { display:block; min-height:12px; color:#4e675b; font-size:9px; text-align:right; }
.legend { display:flex; gap:18px; align-items:center; margin:15px 0 10px; font-size:9px; color:var(--muted); }
.legend span { display:flex; align-items:center; gap:5px; }
.legend i { width:4px; height:4px; border-radius:50%; }
.gold { background:var(--gold); }.blue { background:var(--blue); }.legend-right { margin-left:auto; }
.keyboard { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); grid-template-rows:repeat(4,58px); gap:8px 7px; }
.key { position:relative; min-width:0; border:1px solid #383b5b; border-bottom:3px solid #06071b; border-radius:6px; background:linear-gradient(#282b4b,#1c1e3d); color:var(--ink); padding:15px 0 14px; box-shadow:0 2px 2px #0003; user-select:none; touch-action:manipulation; }
.key .main { font-size:15px; font-weight:600; }
.key .shift-f,.key .shift-g { position:absolute; left:0; right:0; text-align:center; font-size:9px; line-height:12px; font-weight:500; }
.key .shift-f { top:2px; color:var(--gold); }.key .shift-g { bottom:2px; color:var(--blue); }
.key.numeric { background:linear-gradient(#424561,#33364f); border-top-color:#555970; }
.key.operator { background:#153e57; border-color:#28617d; border-bottom-color:#072638; }
.key[data-key="f"] { background:var(--gold); color:#30220a; border-color:#f2ca81; border-bottom-color:#987139; }
.key[data-key="g"] { background:var(--primary); color:white; border-color:#27b8ee; border-bottom-color:#056586; }
.key[data-key="enter"] { grid-column:6; grid-row:3 / 5; background:linear-gradient(#066d96,#075478); border-color:#1680a9; border-bottom-color:#04324e; }
.key[data-key="enter"] .main { font-size:12px; writing-mode:vertical-rl; text-orientation:upright; letter-spacing:-1px; }
.key[data-key="enter"] .shift-f { font-size:8px; }
.key:hover { filter:brightness(1.15); }.key:active,.key.pressed { transform:translateY(1px); filter:brightness(1.3); border-bottom-width:1px; }
.key.selected { outline:2px solid var(--ink); outline-offset:1px; }
.key:disabled { opacity:.45; cursor:wait; }
footer { display:flex; justify-content:space-between; gap:10px; color:#929bb8; font-size:9px; padding-top:13px; }
#memory-status::before { content:'●'; color:#67c8a1; font-size:7px; margin-right:6px; }
#memory-status.warning::before { color:var(--gold); }
#help { padding:15px 0 4px; font-size:12px; line-height:1.65; color:#c1c8dc; }
#help h1 { font-size:16px; color:var(--ink); }kbd { display:inline-block; background:#282c4b; padding:0 4px; border:1px solid #444762; border-radius:3px; font-size:10px; }
.fine-print { font-size:10px; color:var(--muted); }
.settings { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }.settings button,#reset-confirmation button { border:1px solid #444762;background:#282c4b;color:var(--ink);padding:7px 10px;border-radius:5px;font-size:11px; }.settings input { accent-color:var(--primary); }#reset-confirmation { padding:10px;margin-top:12px;border:1px solid #a7814a;border-radius:6px; }
@media (max-width:500px) { .calculator { padding:12px 10px 10px; }.brand-row { margin-bottom:10px; }.brand { gap:8px; }.brand strong { font-size:21px; }.brand>span:last-child { font-size:8px; letter-spacing:1px; }.brand strong span { display:none; }.keyboard { gap:6px 4px; grid-template-rows:repeat(4,52px); }.key .main { font-size:12px; }.key .shift-f,.key .shift-g { font-size:7px; }.key[data-key="enter"] .shift-f { font-size:6px; }.legend { gap:9px; font-size:8px; }.legend-right { display:none!important; }.indicators { gap:8px; font-size:8px; }footer { font-size:8px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }