.clock-page{max-width:880px;margin:24px auto;padding:20px;color:#352d2a;background:rgba(255,253,247,.96);border:1px solid #d9c6a6;border-radius:20px}.clock-heading{display:flex;align-items:center;gap:16px}.clock-heading img{width:72px;height:72px;border-radius:50%;object-fit:cover}.clock-heading h2{margin:0;font-size:1.4rem}.clock-now{font-variant-numeric:tabular-nums;font-size:clamp(2.2rem,8vw,3.5rem);font-weight:700;letter-spacing:.03em;margin:12px 0 0}.clock-date{margin:0 0 18px;font-size:.9rem}.clock-tabs{display:flex;gap:8px;margin-bottom:18px}.clock-tabs button{flex:1;min-height:48px;border:1px solid #bb9c79;background:white;color:#553d2f;border-radius:10px;font-size:1rem}.clock-tabs button[aria-pressed=true]{background:#a72525;color:white;border-color:#a72525}.clock-panel label{display:block;font-size:1rem;margin:12px 0 6px}.clock-panel input,.clock-panel select{max-width:100%;font:inherit;padding:12px;border:1px solid #bb9c79;border-radius:8px;background:white;color:#352d2a;box-sizing:border-box}.clock-panel input[type=time]{font-size:2rem;width:100%;min-width:0}.clock-duration{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.clock-duration input{width:100%;font-size:1.5rem}.clock-presets,.clock-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.clock-page button,.clock-alert button{min-height:44px;cursor:pointer;font-size:1rem;padding:10px 16px}.clock-actions button:first-child,.clock-alert button{background:#a72525;color:white;border:0;border-radius:9px}.clock-page button:disabled{opacity:.5;cursor:not-allowed}.clock-countdown{font-size:clamp(2.5rem,10vw,4rem);font-variant-numeric:tabular-nums;text-align:center;margin:18px 0;color:#952020}.clock-sound-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.clock-sound-row select{flex:1;min-width:160px}.clock-options{margin-top:22px;border-top:1px solid #dccbb6;padding-top:16px}.clock-options label{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}.clock-options input[type=range]{flex:1;min-width:120px}.clock-help{font-size:.9rem;line-height:1.7}.clock-status{min-height:1.5em}.clock-ribbon{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:1200;background:#fff9e9;color:#702222;border:1px solid #bca17b;border-radius:24px;padding:10px 18px;box-shadow:0 3px 18px #0003;max-width:calc(100vw - 32px);text-align:center;font-size:.9rem;text-decoration:none}.clock-alert{max-width:400px;width:calc(100% - 32px);box-sizing:border-box;border:1px solid #c8ad86;border-radius:20px;padding:24px;text-align:center;color:#352d2a;background:#fff9ee}.clock-alert::backdrop{background:#1e1111b3}.clock-alert img{width:100px;height:100px;border-radius:50%}.clock-alert h2{font-size:1.5rem}.clock-alert-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.clock-alert button:focus-visible,.clock-page button:focus-visible{outline:3px solid #28609a;outline-offset:3px}@media(max-width:520px){.clock-page{margin:12px 10px;padding:16px}.clock-heading img{width:56px;height:56px}.clock-heading h2{font-size:1.2rem}}