:root { --ink:#23211e; --muted:#77736d; --orange:#f97316; --orange-dark:#d85e08; --cream:#fffaf3; --line:#eee5d9; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 50% -15%,#ffe9c8 0,transparent 39rem),var(--cream); font-family:"Gowun Dodum",sans-serif; }
button { font:inherit; cursor:pointer; }
.app-shell { width:min(100% - 2rem,620px); margin:0 auto; padding:3rem 0 2.5rem; text-align:center; }
header { margin-bottom:2.25rem; }.brand { color:var(--ink); font-family:"DM Sans",sans-serif; font-weight:700; font-size:1.15rem; text-decoration:none; letter-spacing:-.02em; }.brand span { color:var(--orange); font-size:.85rem; vertical-align:.1em; }header p { margin:.55rem 0 0; color:var(--muted); font-size:.93rem; }
nav { display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; margin-top:1rem; }nav a,footer a,.content-section a { color:var(--orange-dark); font-size:.78rem; text-underline-offset:3px; }
.timer-card { padding:1.3rem 1.25rem 1.6rem; border:1px solid rgba(238,229,217,.9); border-radius:28px; background:rgba(255,253,249,.85); box-shadow:0 20px 60px rgba(132,82,27,.09); }.mode-row { display:flex; gap:.35rem; justify-content:center; }.mode { border:0; border-radius:999px; padding:.55rem .85rem; color:var(--muted); background:transparent; font-size:.86rem; }.mode.active { color:var(--orange-dark); background:#fff0df; font-weight:bold; }.eyebrow { margin:2rem 0 .45rem; color:var(--orange-dark); font:700 .68rem "DM Sans",sans-serif; letter-spacing:.15em; }
.timer-wrap { position:relative; display:grid; place-items:center; margin:0 auto .7rem; width:min(74vw,265px); aspect-ratio:1; }.progress-ring { position:absolute; inset:0; transform:rotate(-90deg); }.ring-track,.ring-progress { fill:none; stroke-width:7; }.ring-track { stroke:#f4eadf; }.ring-progress { stroke:var(--orange); stroke-linecap:round; stroke-dasharray:659.73; stroke-dashoffset:0; transition:stroke-dashoffset .5s linear,stroke .2s; }time { position:relative; font:700 clamp(3.9rem,14vw,5.8rem)/1 "DM Sans",sans-serif; letter-spacing:-.085em; font-variant-numeric:tabular-nums; }
.start-button { min-width:180px; border:0; border-radius:14px; padding:.93rem 1.35rem; color:white; background:var(--orange); box-shadow:0 7px 14px #f973163d; font-weight:bold; }.start-button:hover { background:var(--orange-dark); transform:translateY(-1px); }.start-button span { margin-left:.5rem; font-size:1.1rem; }.reset-button { display:block; margin:.65rem auto 0; border:0; color:var(--muted); background:transparent; font-size:.8rem; text-decoration:underline; text-underline-offset:3px; }.status { min-height:1.3rem; margin:1.15rem 0 0; color:var(--muted); font-size:.84rem; }
.summary { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:1.35rem; }.summary article { padding:1rem .35rem; border:1px solid var(--line); border-radius:17px; background:rgba(255,253,249,.62); }.summary strong { display:block; color:var(--orange-dark); font:700 1.45rem "DM Sans",sans-serif; }.summary span { display:block; margin-top:.28rem; color:var(--muted); font-size:.7rem; }.hint { margin:1.5rem 0 0; color:#a39a90; font-size:.74rem; }
.contact-card { margin-top:1.35rem; padding:1.2rem; border:1px solid var(--line); border-radius:22px; background:rgba(255,253,249,.7); text-align:left; }.contact-card .eyebrow { margin:.15rem 0 .35rem; }.contact-card h2 { margin:0; font-size:1.18rem; }.contact-card > p:not(.eyebrow) { margin:.4rem 0 1rem; color:var(--muted); font-size:.8rem; }.contact-card form { display:grid; gap:.7rem; }.contact-card label { display:grid; gap:.32rem; color:var(--muted); font-size:.77rem; }.contact-card input,.contact-card textarea { width:100%; border:1px solid #e8ddd0; border-radius:10px; padding:.7rem .75rem; color:var(--ink); background:#fffdf9; font:inherit; font-size:.9rem; }.contact-card textarea { resize:vertical; }.contact-card input:focus,.contact-card textarea:focus { outline:2px solid #f9731645; border-color:var(--orange); }.contact-submit { border:0; border-radius:10px; padding:.75rem 1rem; color:#fff; background:var(--orange); font-weight:bold; }.contact-submit:hover { background:var(--orange-dark); }
.content-section { margin-top:1.35rem; padding:1.4rem 1.25rem; border:1px solid var(--line); border-radius:22px; background:rgba(255,253,249,.7); text-align:left; }.content-section .eyebrow { margin:.1rem 0 .35rem; }.content-section h1,.content-section h2 { margin:.1rem 0 .7rem; line-height:1.45; font-size:1.22rem; }.content-section h1 { font-size:1.5rem; }.content-section p,.content-section li { color:#5e5952; font-size:.88rem; line-height:1.85; }.content-section ul { margin:0; padding-left:1.2rem; }.guide-steps { display:grid; gap:.85rem; margin:1rem 0 0; padding:0; list-style:none; counter-reset:guide; }.guide-steps li { display:grid; grid-template-columns:1.8rem 1fr; column-gap:.5rem; counter-increment:guide; }.guide-steps li::before { content:counter(guide); display:grid; place-items:center; grid-row:span 2; width:1.65rem; height:1.65rem; border-radius:50%; color:var(--orange-dark); background:#fff0df; font:700 .8rem "DM Sans",sans-serif; }.guide-steps strong { color:var(--ink); font-size:.92rem; }.guide-steps span { grid-column:2; color:var(--muted); font-size:.84rem; line-height:1.7; }.two-column { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }.two-column h2 { font-size:1rem; }.two-column p { margin:0; }details { border-top:1px solid var(--line); padding:.85rem 0; }details:last-child { border-bottom:1px solid var(--line); }summary { cursor:pointer; color:var(--ink); font-size:.88rem; font-weight:bold; }details p { margin:.65rem 0 0; }.policy-page { max-width:720px; }.policy-page .content-section { padding:1.6rem; }footer { margin:1.8rem 0 .25rem; color:#a39a90; text-align:center; }footer a { margin:0 .45rem; }footer p { margin:.8rem 0 0; font-size:.72rem; line-height:1.6; }
body.break-mode { --orange:#26a78a; --orange-dark:#14745e; background:radial-gradient(circle at 50% -15%,#d4f4e9 0,transparent 39rem),#f7fcfa; }body.break-mode .mode.active { color:#14745e; background:#dff6ef; }@media (max-width:390px) { .app-shell { padding-top:2rem; }.timer-card { padding-inline:.75rem; }.mode { padding-inline:.6rem; } }