:root{--bg:#f5f0e8;--bg2:#ede7d9;--paper:#faf7f2;--ink:#2c2416;--ink-light:#7a6a52;--accent:#8b5c2a;--accent2:#c4914d;--ice:#4a7a8a;--ice2:#7fb3c4;--cold:#5a6a8a;--cold2:#8a9aba;--border:#d4c4a8;--shadow:rgba(44,36,22,0.1)}*{box-sizing:border-box;margin:0;padding:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body{background:var(--bg);color:var(--ink);font-family:var(--font-body),sans-serif;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:0 0 48px}body:before{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:0}.app{width:100%;max-width:420px;position:relative;z-index:1}.header{padding:40px 28px 24px;text-align:center}.header-icon{font-size:32px;margin-bottom:10px;opacity:.85}.header h1{font-family:var(--font-num),sans-serif;font-weight:300;font-size:28px;letter-spacing:.12em;color:var(--ink)}.header p{font-size:11px;letter-spacing:.2em;color:var(--ink-light);margin-top:6px;text-transform:uppercase}.card{background:var(--paper);margin:0 16px;border-radius:20px;box-shadow:0 4px 32px var(--shadow),0 1px 0 rgba(255,255,255,.8) inset;overflow:hidden;border:1px solid var(--border)}.mode-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--border)}.mode-tab{padding:16px 8px;text-align:center;cursor:pointer;font-size:13px;letter-spacing:.15em;color:var(--ink-light);transition:all .25s ease;position:relative;border:none;background:transparent;font-family:var(--font-body),sans-serif}.mode-tab .tab-emoji{font-size:18px;display:block;margin-bottom:4px}.mode-tab.active[data-mode=hot]{color:var(--accent);background:linear-gradient(180deg,rgba(139,92,42,.06),transparent)}.mode-tab.active[data-mode=ice]{color:var(--ice);background:linear-gradient(180deg,rgba(74,122,138,.06),transparent)}.mode-tab.active[data-mode=cold]{color:var(--cold);background:linear-gradient(180deg,rgba(90,106,138,.06),transparent)}.mode-tab.active:after{content:"";position:absolute;bottom:0;left:20%;right:20%;height:2px;border-radius:2px}.mode-tab.active[data-mode=hot]:after{background:var(--accent)}.mode-tab.active[data-mode=ice]:after{background:var(--ice)}.mode-tab.active[data-mode=cold]:after{background:var(--cold)}.input-section{padding:24px 24px 16px}.input-label{font-size:11px;letter-spacing:.2em;color:var(--ink-light);text-transform:uppercase;margin-bottom:10px;display:block}.input-row{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 18px;transition:border-color .2s}.input-row:focus-within{border-color:var(--accent2)}.mode-ice .input-row:focus-within{border-color:var(--ice2)}.mode-cold .input-row:focus-within{border-color:var(--cold2)}.bean-icon{font-size:20px}input[type=number]{flex:1 1;border:none;background:transparent;font-family:var(--font-num),sans-serif;font-size:32px;font-weight:400;color:var(--ink);outline:none;width:100%}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.input-unit{font-size:13px;color:var(--ink-light);letter-spacing:.1em;white-space:nowrap}.input-error{font-size:11px;color:var(--ink-light);opacity:.7;margin-top:6px;letter-spacing:.05em}.preset-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}.preset-chip{padding:6px 4px;text-align:center;cursor:pointer;border-radius:8px;border:1px solid var(--border);background:transparent;font-family:var(--font-num),sans-serif;font-size:13px;color:var(--ink-light);transition:all .15s ease;letter-spacing:.03em}.preset-chip:hover{border-color:var(--accent2);color:var(--ink)}.mode-ice .preset-chip:hover{border-color:var(--ice2)}.mode-cold .preset-chip:hover{border-color:var(--cold2)}.mode-hot .preset-chip.active{background:rgba(139,92,42,.1);border-color:var(--accent2);color:var(--accent)}.mode-ice .preset-chip.active{background:rgba(74,122,138,.1);border-color:var(--ice2);color:var(--ice)}.mode-cold .preset-chip.active{background:rgba(90,106,138,.1);border-color:var(--cold2);color:var(--cold)}.strength-section{padding:0 24px 20px}.strength-label{font-size:11px;letter-spacing:.2em;color:var(--ink-light);text-transform:uppercase;margin-bottom:10px;display:block}.strength-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.strength-tab{padding:10px 4px;text-align:center;cursor:pointer;border-radius:10px;border:1.5px solid var(--border);background:transparent;font-family:var(--font-body),sans-serif;font-size:12px;color:var(--ink-light);transition:all .2s ease;letter-spacing:.05em}.strength-tab .strength-emoji{font-size:16px;display:block;margin-bottom:3px}.mode-hot .strength-tab.active{background:var(--accent);border-color:var(--accent);color:white}.mode-ice .strength-tab.active{background:var(--ice);border-color:var(--ice);color:white}.mode-cold .strength-tab.active{background:var(--cold);border-color:var(--cold);color:white}.divider{height:1px;background:var(--border);margin:0 24px}.results{padding:24px 24px 28px;display:flex;flex-direction:column;gap:14px;transition:opacity .3s}.results.empty{opacity:.35}.result-item{display:flex;align-items:center;justify-content:space-between;gap:12px;animation:fadeIn .3s ease both}.result-item:first-child{animation-delay:0s}.result-item:nth-child(2){animation-delay:.05s}.result-item:nth-child(3){animation-delay:.1s}.result-item:nth-child(4){animation-delay:.15s}.result-left{display:flex;align-items:center;gap:10px;flex:1 1}.result-icon{font-size:20px;flex-shrink:0}.result-label{letter-spacing:.15em;text-transform:uppercase;display:block}.result-label,.result-sub{font-size:11px;color:var(--ink-light)}.result-sub{opacity:.7}.result-value-wrap{text-align:right;flex-shrink:0}.result-value{font-family:var(--font-num),sans-serif;font-size:28px;font-weight:400;line-height:1}.mode-hot .result-value{color:var(--accent)}.mode-ice .result-value{color:var(--ice)}.mode-cold .result-value{color:var(--cold)}.result-unit{font-size:11px;color:var(--ink-light);letter-spacing:.08em}.gauge-wrap{margin-top:6px;height:3px;background:var(--bg2);border-radius:3px;overflow:hidden;width:100%}.gauge-bar{height:100%;border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1)}.mode-hot .gauge-bar{background:linear-gradient(90deg,var(--accent2),var(--accent))}.mode-ice .gauge-bar{background:linear-gradient(90deg,var(--ice2),var(--ice))}.mode-cold .gauge-bar{background:linear-gradient(90deg,var(--cold2),var(--cold))}.result-item-full{flex-direction:column;align-items:stretch;gap:8px}.result-item-full .result-left{justify-content:space-between}.result-item-full .result-value-wrap{text-align:left}.result-hero .result-value{font-size:36px}.result-ratio{display:block;font-size:11px;color:var(--ink-light);opacity:.7;letter-spacing:.08em;margin-top:1px}.result-grid{display:flex;flex-direction:column;gap:10px}.grind-value{font-size:15px;font-weight:500;letter-spacing:.05em;margin-top:2px;display:block;font-family:var(--font-body),sans-serif}.mode-hot .grind-value{color:var(--accent)}.mode-ice .grind-value{color:var(--ice)}.mode-cold .grind-value{color:var(--cold)}.empty-hint{text-align:center;padding:12px 0;font-size:12px;color:var(--ink-light);letter-spacing:.1em}.tooltip-wrap{display:inline-block;position:relative;margin-left:4px;vertical-align:middle}.tooltip-trigger{background:none;border:1px solid var(--border);border-radius:50%;width:14px;height:14px;font-size:9px;color:var(--ink-light);opacity:.55;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;font-family:var(--font-body),sans-serif;transition:opacity .15s}.tooltip-trigger:focus,.tooltip-trigger:hover{opacity:1;outline:none}.tooltip-body{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);font-size:11px;letter-spacing:.04em;padding:6px 10px;border-radius:8px;white-space:normal;width:200px;z-index:10;pointer-events:none;line-height:1.5}.tooltip-wrap:focus-within .tooltip-body,.tooltip-wrap:hover .tooltip-body{display:block}.footer{display:flex;align-items:center;justify-content:center;gap:12px;padding:24px;letter-spacing:.15em;opacity:.6}.footer,.share-btn{font-size:10px;color:var(--ink-light)}.share-btn{background:none;border:1px solid var(--border);border-radius:6px;padding:2px 8px;letter-spacing:.1em;cursor:pointer;font-family:var(--font-body),sans-serif;transition:all .15s;opacity:1;flex-shrink:0}.share-btn:focus,.share-btn:hover{border-color:var(--accent2);color:var(--ink);outline:none}.share-btn.copied{color:var(--accent);border-color:var(--accent2)}.cold-input-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 24px 0}.cold-toggle-btn{padding:8px 12px;border-radius:10px;border:1.5px solid var(--border);background:transparent;font-family:var(--font-body),sans-serif;font-size:12px;color:var(--ink-light);cursor:pointer;letter-spacing:.05em;transition:all .2s ease;text-align:center}.cold-toggle-btn.active{background:var(--cold);border-color:var(--cold);color:white}.cold-toggle-btn:hover:not(.active){border-color:var(--cold2);color:var(--ink)}.preset-chips-4col{grid-template-columns:repeat(4,1fr)}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}