@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { --bg:#090b10; --panel:rgba(21,25,34,.72); --line:rgba(255,255,255,.1); --muted:#8991a4; --text:#f5f7fb; --lime:#d5f56d; --cyan:#72e5dc; --red:#ff7e88; --shadow:0 28px 80px rgba(0,0,0,.42); }
* { box-sizing:border-box; } body { min-height:100vh; margin:0; color:var(--text); background:var(--bg); font-family:'Space Grotesk',sans-serif; overflow-x:hidden; }
body::before,body::after { content:''; position:fixed; z-index:-1; border-radius:50%; filter:blur(2px); opacity:.55; pointer-events:none; } body::before { width:500px;height:500px;top:-240px;left:-130px;background:radial-gradient(circle,rgba(213,245,109,.15),transparent 68%); } body::after { width:560px;height:560px;right:-180px;bottom:-270px;background:radial-gradient(circle,rgba(114,229,220,.13),transparent 69%); }
button { font:inherit; border:0; cursor:pointer; } .app { width:min(1180px,calc(100% - 40px));margin:0 auto;padding:42px 0 32px; } .topbar { display:flex;align-items:center;justify-content:space-between;margin-bottom:34px; } .topbar-actions { display:flex;align-items:center;gap:20px; } .brand { display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:-.04em;font-size:1.2rem; } .brand-mark { width:34px;height:34px;display:grid;place-items:center;color:#10130d;background:var(--lime);border-radius:10px;font-weight:700;box-shadow:0 0 25px rgba(213,245,109,.18); } .status { display:flex;align-items:center;gap:8px;color:var(--muted);font:500 .7rem 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em; } .status i { display:block;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 11px var(--lime); } .change-mode { color:var(--muted);background:transparent;font:500 .68rem 'DM Mono',monospace;text-transform:uppercase;transition:color .2s ease; } .change-mode:hover { color:var(--lime); }
.layout { display:grid;grid-template-columns:minmax(330px,1fr) minmax(360px,1.12fr);gap:20px;align-items:start; } .glass { background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); } .calculator { padding:18px;border-radius:25px; } .display { --display-scale:1;min-height:164px;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 16px;margin-bottom:14px;border-radius:17px;background:linear-gradient(145deg,rgba(6,8,12,.94),rgba(18,23,29,.93));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -20px 45px rgba(0,0,0,.22);transform:scale(var(--display-scale));transform-origin:center;transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s ease; } .display-meta { display:flex;align-items:center;justify-content:space-between;color:var(--muted);font:.67rem 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase; } .mode-pill { padding:5px 8px;color:var(--lime);border:1px solid rgba(213,245,109,.22);border-radius:5px; } .expression { min-height:48px;display:flex;align-items:end;justify-content:end;color:#c8cdd8;font:1.45rem 'DM Mono',monospace;overflow-wrap:anywhere;text-align:right; } .result { color:var(--text);font:500 clamp(2.5rem,7vw,3.8rem) 'DM Mono',monospace;line-height:1;text-align:right;letter-spacing:-.08em; }
.keys { display:grid;grid-template-columns:repeat(4,1fr);gap:9px; } .key { min-height:61px;color:#e7eaf2;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.065);font:500 1.1rem 'DM Mono',monospace;transition:transform .13s ease,background .2s ease,border-color .2s ease,color .2s ease; } .key:hover { background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.17); } .key:active,.key.pressed { transform:scale(.94);background:rgba(255,255,255,.2); } .key.operator { color:var(--cyan);background:rgba(114,229,220,.08); } .key.function { color:var(--lime);background:rgba(213,245,109,.08); } .key.equals { color:#10130d;background:var(--lime);box-shadow:0 6px 20px rgba(213,245,109,.16); } .key.equals:hover { background:#e1fb89; } .key.zero { grid-column:span 2; }
.story { min-height:600px;padding:27px 28px;border-radius:25px;overflow:hidden; } .story-head { display:flex;justify-content:space-between;align-items:start;gap:18px;margin-bottom:28px; } h1 { max-width:450px;margin:0;font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.05;letter-spacing:-.07em; } h1 span { color:var(--lime); } .tag { color:var(--muted);font:.65rem 'DM Mono',monospace;white-space:nowrap; } .progress-area { margin-bottom:29px; } .progress-label { display:flex;justify-content:space-between;margin-bottom:9px;color:var(--muted);font:.68rem 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.05em; } .progress-track { height:5px;overflow:hidden;border-radius:9px;background:rgba(255,255,255,.08); } .progress-bar { width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--lime));transition:width .65s cubic-bezier(.2,.8,.2,1); } .steps { min-height:350px;display:flex;flex-direction:column;gap:9px; } .step { display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);animation:reveal .55s both; } .step-number { color:var(--lime);font:.67rem 'DM Mono',monospace;padding-top:3px; } .step-equation { color:#d7dbe5;font:.88rem 'DM Mono',monospace;line-height:1.55;overflow-wrap:anywhere;transform-origin:right center;animation:breathe .55s both; } .step-caption { margin-top:4px;color:var(--muted);font-size:.71rem; } .empty { display:grid;place-items:center;min-height:280px;color:var(--muted);text-align:center;font-size:.9rem; } .empty strong { display:block;margin-bottom:7px;color:#dfe4ed;font-size:1rem; } .footer-note { color:var(--muted);font:.68rem 'DM Mono',monospace;text-align:center; } .shake { animation:shake .35s ease; }
.mode-overlay { position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:24px;background:rgba(4,6,9,.76);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:veilIn .5s ease both; } .mode-overlay.is-hidden { animation:veilOut .35s ease both;pointer-events:none;opacity:0; } .mode-panel { width:min(610px,100%);max-height:85vh;overflow-y:auto;padding:34px 36px 25px;border:1px solid rgba(255,255,255,.13);border-radius:25px;background:linear-gradient(145deg,rgba(28,33,45,.96),rgba(13,16,23,.98));box-shadow:0 32px 100px rgba(0,0,0,.62);scrollbar-width:thin;scrollbar-color:rgba(213,245,109,.55) rgba(255,255,255,.06); } .mode-panel::-webkit-scrollbar { width:6px; } .mode-panel::-webkit-scrollbar-track { background:rgba(255,255,255,.04);border-radius:8px; } .mode-panel::-webkit-scrollbar-thumb { background:rgba(213,245,109,.55);border-radius:8px; } .modal-kicker { display:flex;align-items:center;gap:9px;color:var(--lime);font:500 .64rem 'DM Mono',monospace;letter-spacing:.1em; } .spark { font-size:1.1rem; } .modal-line { width:42px;height:1px;background:rgba(213,245,109,.38); } h2 { margin:23px 0 11px;font-size:clamp(2.25rem,6vw,3.45rem);line-height:.96;letter-spacing:-.08em; } h2 em { color:var(--lime);font-style:normal; } .modal-intro { max-width:470px;margin:0 0 22px;color:var(--muted);font-size:.89rem;line-height:1.5; } .mode-grid { display:grid;grid-template-columns:1fr 1fr;gap:9px; } .mode-card { min-height:83px;display:grid;grid-template-columns:39px 1fr 16px;gap:10px;align-items:center;padding:13px 14px;color:var(--text);text-align:left;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.045);transition:transform .2s ease,background .2s ease,border-color .2s ease; } .mode-card:hover { transform:translateY(-3px);border-color:rgba(213,245,109,.5);background:rgba(213,245,109,.08); } .mode-card.extreme { border-color:rgba(213,245,109,.3);background:rgba(213,245,109,.075); } .mode-icon { display:grid;place-items:center;width:34px;height:34px;color:var(--lime);border:1px solid rgba(213,245,109,.23);border-radius:9px;font-size:1.2rem; } .mode-card strong { display:block;font-size:.87rem; } .mode-card small { display:block;margin-top:4px;color:var(--muted);font-size:.7rem; } .mode-card b { color:var(--muted);font-size:1.1rem;transition:transform .2s ease,color .2s ease; } .mode-card:hover b { color:var(--lime);transform:translateX(3px); } .modal-footer { display:flex;gap:9px;margin-top:25px;color:#5f687b;font: .61rem 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.04em; }
.level-view[hidden],.mode-grid[hidden] { display:none; } .back-button { padding:0;color:var(--muted);background:transparent;font:500 .7rem 'DM Mono',monospace;transition:color .2s ease; } .back-button:hover { color:var(--lime); } .level-heading { margin:30px 0 21px; } .level-kicker { color:var(--cyan);font:500 .65rem 'DM Mono',monospace;letter-spacing:.1em; } h3 { margin:8px 0 0;font-size:clamp(1.8rem,5vw,2.6rem);letter-spacing:-.07em;line-height:1; } .level-grid { display:grid;grid-template-columns:1fr 1fr;gap:9px; } .level-card { min-height:76px;display:grid;grid-template-columns:64px 1fr 16px;gap:10px;align-items:center;padding:12px 14px;color:var(--text);text-align:left;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.045);transition:transform .2s ease,background .2s ease,border-color .2s ease; } .level-card:hover { transform:translateY(-3px);color:var(--lime);border-color:rgba(114,229,220,.5);background:rgba(114,229,220,.07); } .level-card span { font-size:1.05rem;font-weight:700; } .level-card small { color:var(--muted);font-size:.7rem; } .level-card b { color:var(--muted);font-size:1.1rem; } .level-card:hover b { color:var(--lime); }
@keyframes reveal { from { opacity:0;transform:translateY(10px) scale(.985); } to { opacity:1;transform:translateY(0) scale(1); } } @keyframes breathe { 0% { transform:scale(.88);opacity:.3; } 65% { transform:scale(1.025); } 100% { transform:scale(1);opacity:1; } } @keyframes shake { 25% { transform:translateX(-5px); } 50% { transform:translateX(5px); } 75% { transform:translateX(-3px); } } @keyframes veilIn { from { opacity:0; } to { opacity:1; } } @keyframes veilOut { from { opacity:1; } to { opacity:0; } }
@media (max-width:800px) { .app { width:min(100% - 24px,560px);padding-top:24px; } .topbar { margin-bottom:22px; } .topbar-actions { gap:10px; } .status { display:none; } .layout { grid-template-columns:1fr; } .story { min-height:450px; } .steps { min-height:220px; } } @media (max-width:520px) { .mode-panel { padding:27px 19px 20px; } .mode-grid { grid-template-columns:1fr; } .modal-footer { flex-wrap:wrap; } } @media (max-width:420px) { .calculator { padding:11px; } .key { min-height:55px; } .story { padding:22px 18px; } .story-head { display:block; } .tag { display:block;margin-top:11px; } .change-mode span { display:none; } }
@media (max-width:520px) { body { background:radial-gradient(circle at 50% -10%,rgba(114,229,220,.1),transparent 42%),var(--bg); } .app { width:min(100% - 24px,400px);padding-top:18px;padding-bottom:20px; } .topbar { align-items:flex-start;margin-bottom:16px; } .brand { font-size:1.05rem; } .brand-mark { width:31px;height:31px; } .change-mode { padding:8px 0; } .layout { gap:12px; } .calculator { padding:12px;border-radius:20px; } .display { min-height:145px;padding:15px 14px 13px;margin-bottom:11px;border-radius:15px; } .display-meta { gap:8px;font-size:.58rem; } .mode-pill { padding:4px 6px; } .expression { min-height:42px;font-size:1.05rem; } .result { font-size:clamp(2.4rem,13vw,3.3rem); } .keys { gap:7px; } .key { min-height:58px;border-radius:11px;font-size:1rem; } .history-button { margin-bottom:10px;padding:11px; } .story { min-height:0;padding:21px 18px;border-radius:20px; } .story-head { display:block;margin-bottom:22px; } h1 { font-size:1.65rem; } .tag { display:block;margin-top:12px;white-space:normal; } .progress-area { margin-bottom:20px; } .steps { min-height:180px; } .empty { min-height:180px;font-size:.82rem; } .step { grid-template-columns:26px 1fr;gap:8px;padding:10px 0; } .step-equation { font-size:.78rem; } .step-caption { font-size:.67rem; } .footer-note { margin-top:15px;font-size:.6rem; } .mode-overlay { padding:12px; } .mode-panel { max-height:calc(100vh - 24px);padding:24px 16px 18px;border-radius:20px; } h2 { font-size:clamp(2rem,11vw,2.8rem); } .mode-grid { grid-template-columns:1fr; } .mode-card { min-height:72px;grid-template-columns:34px 1fr 14px;padding:11px 12px; } .history-drawer { width:100%;padding:25px 18px 18px; } .history-head h2 { font-size:2.2rem; } }
.history-button { width:100%;display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 12px;padding:10px;color:var(--muted);border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.035);font:500 .7rem 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em;transition:color .2s ease,background .2s ease,border-color .2s ease; } .history-button:hover { color:var(--lime);border-color:rgba(213,245,109,.3);background:rgba(213,245,109,.07); } .history-button span { font-size:1rem; } .history-button b { min-width:18px;padding:3px 5px;color:#10130d;border-radius:5px;background:var(--lime);font-size:.6rem; }
.complication-view[hidden] { display:none; } .complication-grid { display:grid;grid-template-columns:1fr;gap:9px; } .complication-grid .mode-card { min-height:78px; } .complication-grid .mode-card:first-child { border-color:rgba(213,245,109,.2); } .complication-grid .mode-card:nth-child(2) { border-color:rgba(114,229,220,.2); } .complication-grid .mode-card:nth-child(3) { border-color:rgba(255,126,136,.25); } .complication-grid .mode-card:nth-child(3) .mode-icon { color:var(--red);border-color:rgba(255,126,136,.28); }
.history-backdrop { position:fixed;inset:0;z-index:18;background:rgba(4,6,9,.54);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:veilIn .3s ease both; } .history-backdrop[hidden] { display:none; }
.history-drawer { position:fixed;z-index:19;top:0;right:0;width:min(440px,100%);height:100vh;display:flex;flex-direction:column;padding:34px 28px 25px;background:linear-gradient(155deg,rgba(28,33,45,.98),rgba(11,14,20,.99));border-left:1px solid rgba(255,255,255,.13);box-shadow:-25px 0 80px rgba(0,0,0,.45);transform:translateX(102%);transition:transform .45s cubic-bezier(.2,.8,.2,1); } .history-drawer.is-open { transform:translateX(0); } .history-head { display:flex;justify-content:space-between;align-items:start; } .history-head h2 { margin:9px 0 0;font-size:2.5rem; } .drawer-close { width:35px;height:35px;color:var(--muted);border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.05);font-size:1.5rem;line-height:1;transition:color .2s ease,background .2s ease; } .drawer-close:hover { color:var(--text);background:rgba(255,255,255,.13); } .history-intro { margin:17px 0 24px;color:var(--muted);font-size:.82rem;line-height:1.5; } .history-list { flex:1;overflow:auto;padding-right:4px; } .history-list::-webkit-scrollbar { width:4px; } .history-list::-webkit-scrollbar-thumb { background:rgba(213,245,109,.28);border-radius:5px; } .history-entry { margin-bottom:10px;padding:14px 15px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.045);animation:reveal .4s both; } .history-entry summary { display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none; } .history-entry summary::-webkit-details-marker { display:none; } .history-expression { color:var(--text);font:500 .95rem 'DM Mono',monospace;overflow-wrap:anywhere; } .history-result { color:var(--lime);font:500 1.05rem 'DM Mono',monospace;white-space:nowrap; } .history-meta { display:flex;gap:8px;margin-top:8px;color:var(--muted);font: .61rem 'DM Mono',monospace;text-transform:uppercase; } .history-meta span:first-child { color:var(--cyan); } .history-sequence { margin:14px 0 0;padding-top:11px;border-top:1px solid rgba(255,255,255,.07); } .history-sequence p { margin:7px 0;color:#c8cdd8;font:.67rem 'DM Mono',monospace;line-height:1.45;overflow-wrap:anywhere; } .history-sequence p span { display:inline-block;width:25px;color:var(--lime); } .history-empty { min-height:220px;display:grid;place-content:center;justify-items:center;gap:7px;color:var(--muted);text-align:center; } .history-empty span { color:var(--lime);font-size:2rem; } .history-empty strong { color:var(--text);font-size:.9rem; } .history-empty small { font-size:.74rem; } .clear-history { margin-top:18px;padding:12px;color:var(--red);border:1px solid rgba(255,126,136,.22);border-radius:10px;background:rgba(255,126,136,.06);font:500 .68rem 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em;transition:background .2s ease,border-color .2s ease; } .clear-history:hover { border-color:rgba(255,126,136,.5);background:rgba(255,126,136,.12); }