*{box-sizing:border-box;margin:0;padding:0}:root{--color-primary: #2563eb;--color-primary-dark: #1d4ed8;--color-text: #1f2937;--color-text-light: #6b7280;--color-bg: #ffffff;--color-bg-secondary: #f3f4f6;--color-border: #d1d5db;--color-focus: #3b82f6;--color-success: #10b981;--spacing-3xs: .1rem;--spacing-2xs: .25rem;--spacing-xs: .5rem;--spacing-sm: .75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--border-radius: .5rem;--transition: all .2s ease}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;line-height:1.6;color:var(--color-text);min-height:100vh}main{max-width:600px;margin-left:auto;margin-right:auto;background:var(--color-bg);border-radius:var(--border-radius);overflow:hidden}header{padding:var(--spacing-xs);text-align:start;color:var(--color-text)}header h1{font-size:1.5rem;font-weight:600}header p{font-size:.95rem;opacity:.95}.subtitle{margin:0;padding-top:var(--spacing-2xs);color:var(--color-text-light);font-size:.9rem}.calculator{padding:var(--spacing-xl)}.form-group{padding-bottom:var(--spacing-lg)}.dual-inputs{display:flex;flex-direction:column}.form-group:last-of-type{padding-bottom:var(--spacing-xl)}.field-heading{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-xs);padding-bottom:var(--spacing-xs)}.field-heading label{padding:0}label{display:block;font-weight:600;font-size:.95rem;color:var(--color-text);padding-bottom:var(--spacing-xs)}.helper-text{font-weight:400;font-size:.85rem;color:var(--color-text-light)}input[type=text],input[type=number]{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:1rem;border:2px solid var(--color-border);border-radius:var(--border-radius);background:var(--color-bg);color:var(--color-text);transition:var(--transition)}input[type=text]:hover,input[type=number]:hover{border-color:var(--color-primary);box-shadow:0 0 0 3px #2563eb1a}input[type=text]:focus,input[type=number]:focus{outline:none;border-color:var(--color-focus);box-shadow:0 0 0 3px #3b82f633;transform:scale(1.01)}.input-with-button{display:flex;gap:var(--spacing-sm)}.input-with-button input{flex:1}button{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);font-size:.9rem;font-weight:600;color:#fff;background:var(--color-primary);border:2px solid var(--color-primary);border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);white-space:nowrap}button:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);box-shadow:0 4px 6px -1px #0000001a;transform:translateY(-2px) scale(1.02)}button:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d;transform:translateY(-2px) scale(1.02)}button:active{transform:translateY(0) scale(.98)}button svg{flex-shrink:0}.preset-input{position:relative}.preset-group{position:absolute;top:calc(100% + .4rem);left:0;right:0;display:none;flex-wrap:wrap;gap:var(--spacing-xs);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:var(--spacing-xs);box-shadow:0 12px 24px -6px #0f172a33;z-index:10}.preset-group.is-visible{display:flex}.preset-button{padding:.3rem var(--spacing-xs);font-size:.8rem;background:var(--color-bg-secondary);border-color:var(--color-border);background-color:transparent;color:var(--color-text);width:fit-content;border-width:.1rem}.preset-button .preset-label{display:inline-flex;align-items:baseline;gap:.2rem;font-weight:600;font-size:.8rem}.preset-button .preset-value{font-size:.85rem}.preset-button .preset-unit{font-size:.7rem;opacity:.85}.preset-button:hover,.preset-button:focus{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.result{background:var(--color-bg-secondary);border-radius:var(--border-radius);padding:var(--spacing-xl);text-align:center}.result h2{font-size:1.1rem;font-weight:600;color:var(--color-text-light);padding-bottom:var(--spacing-md)}.end-time{font-size:3rem;font-weight:700;color:var(--color-success);font-variant-numeric:tabular-nums;letter-spacing:.05em}@media(max-width:640px){body{padding:0}header h1{font-size:1.2rem}header{padding-left:var(--spacing-lg);padding-bottom:0}.calculator{padding:var(--spacing-lg)}.input-with-button{flex-direction:column}.input-with-button input{width:100%}button{width:100%;justify-content:center}.end-time{font-size:2.5rem}}@media(prefers-contrast:high){:root{--color-primary: #1e40af;--color-border: #374151}input[type=text],input[type=number],button{border-width:3px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}