:root{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:#faf9f6;font-synthesis:none;--dim:.33;--action-height:46px}
*{box-sizing:border-box}
body{margin:0;position:relative;min-height:100svh;background:#25312e;color:#fff;overflow-x:hidden}
button,input,select{font:inherit}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit;border:0;background:none}
button:disabled{cursor:default;opacity:.4}
button,a,input,select,summary{outline-offset:5px}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #e4dbb9}
input:focus-visible,select:focus-visible{outline:2px solid #b7c8b4}
a{color:inherit}
#scenery,.shade{position:fixed;inset:0;pointer-events:none}
#scenery{background:#25312e url('assets/lake.jpg') center/cover no-repeat;z-index:-3}
.shade{background:linear-gradient(180deg,rgba(10,19,20,.25),rgba(12,23,22,var(--dim)) 45%,rgba(6,17,15,.60));z-index:-2}
header,footer{position:fixed;left:0;right:0;display:flex;align-items:center;padding:32px 40px;z-index:1}
header{top:0;justify-content:flex-end;pointer-events:none}
header button{pointer-events:auto}
.weather{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding:0}
#weather-value{font-size:24px;font-weight:300}
#weather-city{font-size:11px;color:#ffffffb8}
/* Equal upper and lower rows keep the Safari button at the viewport's center. */
main{height:100svh;min-height:600px;display:grid;grid-template-rows:minmax(0,1fr) var(--action-height) minmax(0,1fr);justify-items:center;padding:0 24px}
.primary-slot{display:flex;align-items:center;justify-content:center}
main.primary-hidden{grid-template-rows:minmax(0,1fr) 0 minmax(0,1fr)}
main.primary-hidden .below-action{padding-top:0}
.moment{align-self:end;margin-bottom:28px;text-align:center}
.date{font-size:11px;letter-spacing:3px;font-weight:500;color:#fffdf6d9}
h1{font-size:clamp(88px,10.4vw,144px);font-weight:200;letter-spacing:-7px;line-height:1.14;margin:12px 0 10px;font-variant-numeric:tabular-nums;text-shadow:0 3px 45px #13272122}
.greeting{font-size:clamp(17px,1.65vw,24px);font-weight:300;letter-spacing:-.5px;margin:8px 0 0;text-shadow:0 2px 15px #0003}
.safari-start{height:var(--action-height);display:flex;align-items:center;justify-content:center;gap:9px;min-width:156px;max-width:min(340px,88vw);padding:0 18px;text-decoration:none;background:#13261d42;color:#fffffff0;border:1px solid #ffffff38;border-radius:12px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:14px;font-weight:400;letter-spacing:0;transition:background .2s,border-color .2s}
.safari-start:hover{background:#23392d80;border-color:#ffffff65}
.safari-start svg{flex-shrink:0}
#primary-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.below-action{align-self:start;display:flex;align-items:center;flex-direction:column;width:100%;padding-top:18px}
.shortcuts-area{width:min(760px,92vw)}
.engines{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.engines:empty{display:none}
.shortcut{display:flex;align-items:center;gap:9px;text-decoration:none;border:1px solid #ffffff38;background:#13261d42;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:12px;padding:12px 17px;font-size:13px;color:#fffffff0;transition:background .2s,color .2s,border-color .2s}
.shortcut:hover{background:#f4f2e9;color:#2c3c32;border-color:#f4f2e9}
.shortcut-symbol{font-size:20px;line-height:1}
.daily-focus{text-align:center;margin-top:42px;width:min(450px,88vw)}
.eyebrow{font-size:9px;letter-spacing:2.8px;font-weight:500;color:#e4dfcbb8}
#focus-form{display:flex;align-items:center;justify-content:center;margin:11px auto 0;border-bottom:1px solid transparent;padding:0 0 9px;gap:6px;transition:border-color .2s}
#focus-form:focus-within{border-color:#ffffff50}
#focus-input{background:none;border:0;min-width:0;width:100%;font-size:18px;font-weight:300;color:#fff;text-align:center;outline:none}
#focus-input::placeholder{color:#ffffffd6}
#focus-check,#focus-save{font-size:21px;color:#fff9;width:30px;flex-shrink:0}
#focus-check[aria-pressed=true]{color:#ddedce}
#focus-form.completed input{text-decoration:line-through;opacity:.65}
#focus-status{display:block;margin-top:2px;font-size:10px;color:#ffffff83}
footer{bottom:0;justify-content:space-between;padding-bottom:28px;align-items:flex-end}
.photo-info{display:flex;align-items:center;gap:11px}
.photo-tools{display:flex;align-items:center;gap:2px}
.photo-label{display:flex;flex-direction:column;gap:5px}
#scene-name{font-size:11px;color:#ffffffdf}
#photo-credit{font-size:9px;color:#ffffff8c;text-decoration:none}
.circle-button{font-size:22px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-weight:300;transition:background .2s}
.circle-button:hover{background:#ffffff1f}
.pin-button{color:#ffffffa3}
.pin-button[aria-pressed=true]{color:#f1e9cb;background:#ffffff20}
.quiet-line{font-family:Georgia,serif;font-size:14px;font-style:italic;letter-spacing:.2px;color:#ffffffa3;margin:0 0 7px;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.footer-tools{display:flex;align-items:center;gap:20px}
.timer-button{font-size:18px;display:flex;gap:8px;align-items:center}
.timer-button span{font-size:11px;color:#ffffffcb}
.timer-panel{position:fixed;right:40px;bottom:85px;width:300px;background:#192822ec;border:1px solid #ffffff24;border-radius:20px;padding:22px;backdrop-filter:blur(30px);z-index:4;box-shadow:0 15px 65px #0004}
.panel-heading{display:flex;justify-content:space-between;font-size:12px;align-items:center;color:#e7e9da}
.panel-heading button{font-size:23px}
#timer-display{text-align:center;font-size:55px;font-weight:200;margin:20px 0;font-variant-numeric:tabular-nums}
.timer-presets,.timer-actions{display:flex;justify-content:center;gap:8px}
.timer-presets button{font-size:11px;padding:8px;border-radius:8px;background:#ffffff0c}
.timer-actions{margin-top:20px}
.timer-actions button,.secondary{background:#e7eadc;color:#23392f;border-radius:8px;padding:10px 22px;font-size:12px}
.timer-actions button+button{background:#ffffff12;color:#fff}
.timer-panel p{font-size:10px;color:#fff8;text-align:center;margin:16px 0 0}
dialog{background:#f3f2eb;color:#2c3c32;width:460px;max-width:calc(100vw - 28px);max-height:88svh;border:none;border-radius:22px;padding:0;box-shadow:0 30px 100px #0006;color-scheme:light}
dialog[open]{display:flex;flex-direction:column}
dialog::backdrop{background:#07140e5e;backdrop-filter:blur(7px)}
.dialog-heading{padding:25px 30px 21px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #23392f12;margin:0;flex-shrink:0}
.dialog-heading .eyebrow{color:#788572;font-size:8px}
h2{font-size:25px;font-weight:500;letter-spacing:-1px;margin:8px 0 0}
h3{font-size:13px;font-weight:600;margin:0 0 18px}
.close{font-size:27px;color:#5d6c61}
.settings-body{padding:23px 30px 28px;overflow-y:auto;overscroll-behavior:contain}
.settings-section+.settings-section{border-top:1px solid #30402c22;padding-top:23px;margin-top:6px}
.provider-options{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.provider-options .switch-row{margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:9px;font-size:12px;margin-bottom:20px}
.field input:not([type=range]),.field select{width:100%;background:#fff9;border:1px solid #344b3523;border-radius:8px;padding:11px 12px;color:#314637;min-width:0;font-size:13px}
.field input[type=range]{width:100%;accent-color:#586d55}
.scene-options{display:flex;gap:8px;margin-top:16px}
.scene-option{flex:1;height:64px;border-radius:8px;background-size:cover;background-position:center;border:3px solid transparent}
.scene-option[aria-pressed=true]{border-color:#536b4f;box-shadow:0 0 0 2px #f3f2eb inset}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:22px}
.switch-row input,.custom-shortcut-toggle input{accent-color:#526f52;width:17px;height:17px;cursor:pointer;flex-shrink:0}
.two-fields{display:flex;gap:12px}
.two-fields>.field{width:50%}
details{border-top:1px solid #30402c22;padding:17px 0;font-size:12px}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between}
summary::after{content:'+'}
details[open] summary::after{content:'−'}
.small,.privacy{font-size:11px;line-height:1.9;color:#6e796e}
.small{margin:14px 0}
.small li{margin-bottom:8px}
ol.small{padding-left:17px}
.photo-note{margin:-6px 0 19px;font-size:10px}
.browse-photos{width:100%;margin:-3px 0 22px;text-align:center}
#photo-gallery{width:1100px;height:88svh}
#photo-gallery .dialog-heading{padding:23px 28px 19px}
.gallery-toolbar{padding:18px 28px 16px;flex-shrink:0;border-bottom:1px solid #23392f12}
.gallery-filters{display:flex;flex-wrap:wrap;gap:7px}
.gallery-filters button{border:1px solid #30402c22;border-radius:18px;padding:8px 13px;font-size:12px;color:#5f705e}
.gallery-filters button[aria-pressed=true]{background:#52674e;color:#fff;border-color:#52674e}
.gallery-hint{display:flex;justify-content:space-between;gap:12px;margin:13px 0 0;font-size:11px;line-height:1.7;color:#74806f}
#gallery-count{color:#42583f;white-space:nowrap}
.gallery-scroll{padding:22px 28px 28px;overflow-y:auto;overscroll-behavior:contain}
.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:19px 16px}
.gallery-card{padding:0;min-width:0;text-align:left;color:#465b42;position:relative}
.gallery-card img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;border-radius:11px;background:#d8ded2}
.gallery-card span{display:block;margin-top:8px;font-size:11px;line-height:1.5;padding:0 3px}
.gallery-card[aria-pressed=true] img{outline:3px solid #586e50;outline-offset:3px}
.gallery-card[aria-pressed=true]::after{content:'✓';position:absolute;right:9px;top:9px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#f4f2eb;color:#48603f;font-size:14px}
.gallery-card.image-unavailable::before{content:'미리보기를 불러올 수 없어요';display:grid;place-items:center;aspect-ratio:8/5;background:#d8ded2;border-radius:11px;font-size:11px;color:#65765e}
@media(max-width:850px){.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery-hint{flex-direction:column;gap:3px}}
.primary-note{font-size:10px;margin:13px 0 8px}
.text-button{color:#596d57;font-size:11px;padding:4px 0 18px;text-align:left}
.first-field{margin-top:20px}
.privacy{font-size:10px;margin:14px 0 0}
.privacy a{color:#50634d}
kbd{font:10px ui-monospace,monospace;border:1px solid #344b3523;padding:2px 5px;border-radius:4px}
#custom-engine-list{margin-top:12px}
#custom-engine-list>div{display:flex;justify-content:space-between;align-items:center;padding:7px 0}
.custom-shortcut-toggle{display:flex;align-items:center;gap:8px}
#custom-engine-list button{font-size:11px;color:#946354}
#toast{position:fixed;bottom:95px;left:50%;transform:translateX(-50%);max-width:90vw;background:#f3f2eb;color:#283c2e;font-size:12px;line-height:1.6;padding:12px 20px;border-radius:10px;z-index:10;box-shadow:0 5px 30px #0003}
[hidden]{display:none!important}
@media(max-width:650px){
  :root{--action-height:46px}
  header{padding:24px}main{padding:0 18px;min-height:640px}
  h1{letter-spacing:-5px}.moment{margin-bottom:25px}
  .safari-start{min-width:156px;font-size:14px;border-radius:12px}
  .shortcuts-area{width:min(440px,94vw)}.engines{gap:8px}
  .shortcut{font-size:12px;padding:11px 14px;gap:8px}
  .daily-focus{margin-top:32px}#focus-input{font-size:17px}
  footer{padding:22px}.quiet-line{display:none}.footer-tools{gap:10px}
  .photo-info{gap:7px}.photo-tools{gap:0}.photo-label{max-width:150px}
  .timer-panel{right:20px;bottom:76px}.settings-body{padding:22px 24px 26px}.dialog-heading{padding:25px 24px 21px}
  #photo-gallery .dialog-heading{padding:20px}.gallery-toolbar{padding:15px 20px}.gallery-scroll{padding:18px 20px 24px}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 12px}.gallery-filters{gap:6px}.gallery-filters button{padding:7px 10px;font-size:11px}
}
@media(max-height:650px) and (min-width:651px){
  :root{--action-height:46px}
  .moment{margin-bottom:22px}h1{font-size:96px}.greeting{font-size:18px}
  .daily-focus{margin-top:27px}.shortcut{padding:10px 15px}
  header{padding-top:22px}footer{padding-bottom:20px}
}
@media(max-height:639px){header,footer{position:absolute}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}