*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-page: #000;--bg-display: #1c1c1e;--bg-digit: #3a3a3c;--bg-special: #636366;--bg-operator: #ff9f0a;--bg-error-banner: #2d1010;--color-text: #fff;--color-expression: #888;--color-error: #ff453a;--color-link: #ff9f0a;--radius-circle: 50%;--radius-pill: 36px;--radius-card: 16px;--gap: 12px;--btn-size: 96px}body{background:var(--bg-page);min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:24px 16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;color:var(--color-text)}.calc-wrapper{width:100%;display:flex;justify-content:center}.calc-container{width:100%;max-width:540px}.calc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calc-header h1{font-size:22px;font-weight:400;color:var(--color-text)}.calc-header a{color:var(--color-link);text-decoration:none;font-size:16px}.calc-header a:hover{opacity:.8}.calc-display{background:var(--bg-display);border-radius:var(--radius-card);padding:20px 24px 24px;margin-bottom:14px;min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}.calc-expression{color:var(--color-expression);font-size:18px;text-align:right;min-height:26px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calc-result{color:var(--color-text);font-size:64px;font-weight:300;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}.calc-result--error{color:var(--color-error);font-size:36px}.calc-error-banner{background:var(--bg-error-banner);border:1px solid var(--color-error);border-radius:var(--radius-card);padding:10px 16px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}.calc-error-banner span{color:var(--color-error);font-size:14px}.btn--clear-error{background:var(--color-error)!important;color:#fff!important;border:none!important;padding:4px 12px!important;font-size:13px!important;height:auto!important;width:auto!important;border-radius:8px!important}.calc-pad{display:grid;grid-template-columns:repeat(4,var(--btn-size));justify-content:center;gap:var(--gap)}.btn{width:var(--btn-size);height:var(--btn-size);flex-shrink:0;border:none;border-radius:50%;font-size:24px;font-weight:400;cursor:pointer;color:var(--color-text);background:var(--bg-digit);transition:filter .1s ease;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.btn:active{filter:brightness(1.4)}.btn--special{background:var(--bg-special)}.btn--operator,.btn--equals{background:var(--bg-operator)}.about-wrapper{width:100%;display:flex;justify-content:center}.about-container{width:100%;max-width:540px}.about-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.about-header h1{font-size:22px;font-weight:400}.about-header a{color:var(--color-link);text-decoration:none;font-size:16px}.about-header a:hover{opacity:.8}.about-section{background:var(--bg-display);border-radius:var(--radius-card);padding:20px 24px;margin-bottom:16px}.about-section h2{font-size:18px;font-weight:600;margin-bottom:10px}.about-section p{color:#ccc;font-size:15px;line-height:1.6;margin-bottom:8px}.about-section p:last-child{margin-bottom:0}.about-section ul{list-style:none;display:flex;flex-direction:column;gap:8px}.about-section ul li{color:#ccc;font-size:15px;padding-left:20px;position:relative}.about-section ul li:before{content:"•";position:absolute;left:4px;color:var(--color-link)}.about-cta{display:flex;flex-direction:column;align-items:center;gap:16px}.btn-open-calc{background:var(--bg-operator);color:#fff;border:none;border-radius:12px;padding:14px 40px;font-size:17px;font-weight:600;cursor:pointer;transition:filter .1s ease}.btn-open-calc:hover{filter:brightness(1.1)}.about-footer-text{color:var(--color-expression);font-size:13px}@media (max-width: 520px){:root{--btn-size: 80px;--gap: 10px}.calc-result{font-size:52px}}@media (max-width: 420px){:root{--btn-size: 68px;--gap: 8px}body{padding:12px 8px}.calc-result{font-size:44px}}@media (max-width: 360px){:root{--btn-size: 60px;--gap: 6px}.btn{font-size:20px}}
