@import "https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap";@layer theme{:root,:host{--font-sans:"Noto Sans SC", sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--radius-sm:6px;--radius-md:8px;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-display:"Afacad Flux", "Noto Sans SC", sans-serif;--color-background:oklch(97% .012 92);--color-surface:oklch(99% .006 92);--color-surface-muted:oklch(94% .018 92);--color-foreground:oklch(20% .026 75);--color-muted:oklch(46% .025 75);--color-border:oklch(84% .018 88);--color-primary:oklch(39% .105 145);--color-primary-strong:oklch(31% .1 145);--color-danger:oklch(52% .145 30);--color-success:oklch(60% .12 150);--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-2xl:32px}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}html{background:var(--color-background);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body{background:var(--color-background);min-height:100vh;color:var(--color-foreground);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0}*,:before,:after{box-sizing:border-box}button,input{font:inherit}}@layer components{.page-shell{width:min(1160px,100% - 32px);margin:0 auto;padding:32px 0 48px}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:0 0 24px;display:flex}.brand{font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-foreground);font-size:20px;font-weight:700}.storage-note{color:var(--color-muted);align-items:center;gap:5px;font-size:13px;display:flex}.storage-note:before{content:"";background:var(--color-success);border-radius:50%;width:6px;height:6px;display:inline-block;box-shadow:0 0 6px oklch(60% .12 150/.5)}.calculator-layout{gap:var(--space-2xl);grid-template-columns:480px 1fr;align-items:start;display:grid}.form-column{min-width:0}.result-column{gap:var(--space-lg);scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;max-height:calc(100vh - 48px);display:grid;position:sticky;top:24px;overflow-y:auto}.result-column::-webkit-scrollbar{width:4px}.result-column::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}.panel{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:2px 2px 0 var(--color-border);transition:transform .15s,box-shadow .15s}.panel:hover{box-shadow:3px 3px 0 var(--color-border);transform:translate(-1px,-1px)}.form-panel{padding:28px 32px}.panel-title{font-family:var(--font-display);letter-spacing:-.03em;color:var(--color-foreground);margin:0 0 6px;font-size:clamp(28px,4vw,42px);line-height:1.15}.panel-subtitle{color:var(--color-muted);margin:0 0 24px;font-size:14px;line-height:1.5}.form-grid{gap:var(--space-lg);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.form-section-header{font-family:var(--font-display);color:var(--color-muted);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--color-border);margin-bottom:var(--space-md);grid-column:1/-1;padding-bottom:4px;font-size:13px;font-weight:700}.field{gap:var(--space-sm);display:grid}.field-label-row{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.field-label{color:var(--color-foreground);font-size:14px;font-weight:600}.field-suffix{color:var(--color-muted);flex-shrink:0;font-size:12px}.field-input{border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);width:100%;min-height:46px;color:var(--color-foreground);outline:none;padding:10px 14px;transition:border-color .2s,box-shadow .2s,background-color .2s}.field-input:hover{border-color:#16531d99}@supports (color:color-mix(in lab, red, red)){.field-input:hover{border-color:color-mix(in oklch, var(--color-primary), transparent 40%)}}.field-input:focus{border-color:var(--color-primary);background:var(--color-surface);box-shadow:0 0 0 3px oklch(39% .105 145/.15)}.field-input::placeholder{color:#60564999}@supports (color:color-mix(in lab, red, red)){.field-input::placeholder{color:color-mix(in oklch, var(--color-muted), transparent 40%)}}.field-error{min-height:18px;color:var(--color-danger);font-size:12px;font-weight:500}.form-actions{align-items:center;gap:12px;margin-top:20px;display:flex}.primary-button,.secondary-button{border-radius:var(--radius-md);cursor:pointer;letter-spacing:.01em;border:1.5px solid #0000;min-height:46px;padding:10px 20px;font-size:14px;font-weight:700;transition:all .2s}.primary-button{border-color:var(--color-primary);background:var(--color-primary);color:#fff;flex:1}.primary-button:hover:not(:disabled){border-color:var(--color-primary-strong);background:var(--color-primary-strong);box-shadow:2px 2px 0 var(--color-primary-strong);transform:translate(-1px,-1px)}.primary-button:active:not(:disabled){box-shadow:0 0 0 var(--color-primary-strong);transform:translate(0)}.primary-button:disabled{opacity:.6;cursor:not-allowed}.secondary-button{border-color:var(--color-border);background:var(--color-background);color:var(--color-foreground)}.secondary-button:hover:not(:disabled){border-color:#16531db3}@supports (color:color-mix(in lab, red, red)){.secondary-button:hover:not(:disabled){border-color:color-mix(in oklch, var(--color-primary), transparent 30%)}}.secondary-button:hover:not(:disabled){background:var(--color-surface-muted);box-shadow:2px 2px 0 var(--color-border);transform:translate(-1px,-1px)}.secondary-button:active:not(:disabled){box-shadow:0 0 0 var(--color-border);transform:translate(0)}.result-card,.break-even-card,.comparison-card,.share-card,.empty-result{padding:var(--space-xl)}.result-card{gap:var(--space-xl);border:2px solid var(--color-primary-strong);background:oklch(39% .105 145/.02);display:grid}.metric-line{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:16px;display:flex}.metric-label{color:var(--color-muted);margin:0;font-size:13px;font-weight:500}.metric-value{font-family:var(--font-display);letter-spacing:-.03em;color:var(--color-foreground);margin:4px 0 0;font-size:38px;font-weight:800;line-height:1}.grade-badge{border-radius:var(--radius-sm);border:2px solid var(--color-primary-strong);min-width:58px;height:58px;color:var(--color-primary-strong);font-family:var(--font-display);box-shadow:none;background:0 0;flex-shrink:0;justify-content:center;align-items:center;font-size:28px;font-weight:800;display:inline-flex;transform:rotate(-5deg)}.result-list{gap:8px;margin:0;display:grid}.result-row{color:var(--color-muted);justify-content:space-between;align-items:baseline;gap:16px;padding:4px 0;font-size:14px;display:flex}.result-row strong{color:var(--color-foreground);text-align:right;font-weight:700}.result-advice{border-radius:var(--radius-sm);background:var(--color-surface-muted);color:var(--color-foreground);margin:0;padding:12px 16px;font-size:14px;font-weight:600;line-height:1.5}.section-row{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:4px;padding-bottom:14px;display:flex}.section-title{font-family:var(--font-display);color:var(--color-foreground);margin:0;font-size:18px;font-weight:700;line-height:1.2}.section-target{color:var(--color-muted);white-space:nowrap;font-size:13px;font-weight:600}.section-tag{border-radius:9999px;align-items:center;gap:4px;padding:2px 10px;font-size:12px;font-weight:600;display:inline-flex}.section-tag-green{color:oklch(55% .1 155);background:oklch(60% .12 150/.12)}.section-tag-red{color:var(--color-danger);background:oklch(52% .145 30/.1)}.break-even-card{gap:var(--space-lg);display:grid}.break-even-status{margin:var(--space-sm) 0;font-family:var(--font-display);color:var(--color-primary-strong);letter-spacing:-.03em;font-size:36px;font-weight:800;line-height:1}.break-even-detail{gap:var(--space-md);margin-top:4px;display:grid}.break-even-row{justify-content:space-between;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);background:var(--color-surface-muted);font-size:14px;display:flex}.break-even-row .label{color:var(--color-muted);font-weight:500}.break-even-row .value{font-family:var(--font-display);color:var(--color-foreground);font-weight:700}.break-even-row .feasible .value{color:var(--color-primary-strong)}.break-even-row .infeasible .value{color:var(--color-muted);opacity:.6;text-decoration:line-through}.comparison-card{gap:var(--space-lg);display:grid}.comparison-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;display:grid}.comparison-column{padding:12px 16px}.comparison-column:first-child{border-right:1px solid var(--color-border)}.comparison-column:last-child{padding-left:20px}.comparison-title{font-family:var(--font-display);color:var(--color-primary);letter-spacing:.02em;margin:0 0 12px;font-size:14px;font-weight:700}.comparison-list{gap:8px;margin:0;display:grid}.comparison-row{color:var(--color-muted);justify-content:space-between;align-items:baseline;gap:10px;padding:2px 0;font-size:13px;display:flex}.comparison-row dt{color:var(--color-muted);font-weight:500}.comparison-row dd{font-family:var(--font-display);color:var(--color-foreground);text-align:right;margin:0;font-weight:700}.comparison-row dd.better{color:var(--color-primary-strong)}.comparison-row dd.worse{color:var(--color-danger)}.recommendation-banner{border-radius:var(--radius-md);background:oklch(39% .105 145/.05);border:1px solid #16531d4d;margin-top:4px;padding:12px 16px}@supports (color:color-mix(in lab, red, red)){.recommendation-banner{border:1px solid color-mix(in oklch, var(--color-primary), transparent 70%)}}.recommendation-banner strong{color:var(--color-primary-strong);font-size:13px;font-weight:700}.share-card{background:var(--color-background);color:var(--color-foreground);border:2px dashed var(--color-border);box-shadow:none;border-radius:4px;padding:24px;position:relative}.share-title{font-family:var(--font-display);letter-spacing:-.01em;text-align:center;border-bottom:2px dashed var(--color-border);margin:0 0 18px;padding-bottom:12px;font-size:20px;font-weight:700}.share-lines{gap:8px;margin:0;display:grid}.share-line{border-bottom:1px dotted var(--color-border);justify-content:space-between;gap:16px;padding:6px 0;font-size:14px;display:flex}.share-line:last-of-type{border-bottom:none}.share-line dt{color:var(--color-muted);font-weight:500}.share-line dd{font-family:var(--font-display);margin:0;font-weight:700}.share-tag{color:var(--color-muted);letter-spacing:.04em;text-align:center;border-top:2px dashed var(--color-border);margin:18px 0 0;padding-top:12px;font-size:13px;font-weight:700}.copy-row{justify-content:stretch;margin-top:16px;display:flex}.copy-row button{width:100%}.empty-result{text-align:center;min-height:280px;color:var(--color-muted);background:var(--color-surface-muted);border:2px dashed var(--color-border);align-content:center;gap:10px;display:grid}.empty-result strong{color:var(--color-foreground);font-size:20px;font-family:var(--font-display);font-weight:700}.empty-result svg{opacity:.4;width:48px;height:48px;margin-bottom:8px}.page-footer{text-align:center;color:var(--color-muted);border-top:1px solid var(--color-border);margin-top:32px;padding-top:20px;font-size:12px}@media (width<=900px){.calculator-layout{gap:var(--space-xl);grid-template-columns:1fr}.form-column{width:100%}.result-column{max-height:none;position:static;overflow-y:visible}}@media (width<=620px){.page-shell{width:min(100% - 20px,1160px);padding-top:20px;padding-bottom:32px}.topbar{flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:16px}.form-panel,.result-card,.break-even-card,.comparison-card,.share-card,.empty-result{padding:18px}.form-grid{grid-template-columns:1fr;gap:12px}.metric-line,.result-row,.share-line{flex-direction:column;align-items:flex-start;gap:4px}.result-row strong,.share-line dd{text-align:left}.comparison-grid{grid-template-columns:1fr;gap:0}.comparison-column:first-child{border-right:none;border-bottom:1px solid var(--color-border)}.comparison-column:last-child{padding-top:14px;padding-left:16px}.comparison-row dd{text-align:right}.form-actions{flex-direction:column;align-items:stretch}.primary-button{flex:unset;width:100%}.secondary-button{width:100%}.metric-value{font-size:32px}.grade-badge{min-width:52px;height:52px;font-size:24px}.break-even-status{font-size:30px}}}@layer utilities{.fixed{position:fixed}.static{position:static}.start{inset-inline-start:var(--spacing)}.rounded{border-radius:.25rem}}