:root{--bg: #f5f5f5;--card: #ffffff;--text: #101010;--muted: #555;--accent: #2a5db0;--border: #ddd;--counter-bg: #eeeeee;--counter-text: #101010}[data-theme=dark]{--bg: #121218;--card: #1e1e28;--text: #e8e8ec;--muted: #aaa;--accent: #6a9fff;--border: #333;--counter-bg: #2a2a34;--counter-text: #f0f0f4}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden}.bg-canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}.page{position:relative;z-index:1;max-width:900px;width:100%;margin:0 auto;padding:1rem;box-sizing:border-box}.section-header{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;overflow-x:clip}.section-header:has(.nav--open){overflow:visible}.logo-link{flex:0 0 auto}.logo-link img{display:block;width:180px;max-width:none;height:auto}.nav{display:flex;flex-wrap:nowrap;gap:.75rem;align-items:center;position:relative;flex:0 0 auto;justify-content:flex-end}.nav-primary{display:flex;flex-wrap:nowrap;gap:.75rem;align-items:center}.nav--compact .nav-primary{display:none}.nav-items{display:none;position:absolute;top:calc(100% + .35rem);right:0;z-index:40;min-width:12rem;max-width:min(20rem,calc(100vw - 2rem));flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.35rem;padding:.5rem;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px color-mix(in srgb,var(--text) 12%,transparent)}.nav--open .nav-items{display:flex}.nav-items>a,.nav-items>button{width:100%;text-align:left;box-sizing:border-box;white-space:nowrap}.nav--compact #nav-between{margin-top:.15rem;padding-top:.55rem;border-top:1px solid var(--border)}.nav-menu-toggle{display:inline-flex;align-items:center;gap:.4rem;max-width:min(100%,18rem);color:var(--accent);text-decoration:none;background:none;border:1px solid var(--border);border-radius:6px;padding:.35rem .75rem;cursor:pointer;font:inherit;white-space:nowrap;flex-shrink:0;transition:border-color .15s ease,background-color .15s ease,color .15s ease}.nav-menu-toggle:hover{border-color:var(--accent);color:var(--accent)}.nav-menu-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-menu-arrow{flex-shrink:0;font-size:.75em;line-height:1;transition:transform .15s ease}.nav-menu-burger{display:none;flex-direction:column;justify-content:center;gap:3px;width:1.1rem;flex-shrink:0}.nav-menu-burger>span{display:block;height:2px;width:100%;border-radius:1px;background:currentColor}.nav:not(.nav--compact) .nav-menu-label,.nav:not(.nav--compact) .nav-menu-arrow{display:none}.nav:not(.nav--compact) .nav-menu-burger{display:flex}.nav:not(.nav--compact) .nav-menu-toggle{padding:.45rem .55rem;max-width:none}.nav--compact:not(.nav--icon) .nav-menu-burger{display:none}.nav--compact.nav--open .nav-menu-arrow{transform:rotate(180deg)}.nav--icon .nav-menu-label,.nav--icon .nav-menu-arrow{display:none}.nav--icon .nav-menu-burger{display:flex}.nav--icon .nav-menu-toggle{padding:.45rem .55rem;max-width:none}.nav a,.btn-ghost,.btn-link{color:var(--accent);text-decoration:none;background:none;border:1px solid var(--border);border-radius:6px;padding:.35rem .75rem;cursor:pointer;font:inherit;white-space:nowrap;flex-shrink:0}.nav a,.btn-ghost,.btn-link,.nav-menu-toggle,.presets button,.event-arrow,.life-nav button,.link-row button,.metrics a{transition:border-color .15s ease,background-color .15s ease,color .15s ease}.nav a:hover,.btn-ghost:hover,.btn-link:hover,.nav-menu-toggle:hover,.presets button:hover,.event-arrow:hover,.life-nav button:not(:disabled):hover,.link-row button:hover{border-color:var(--accent);color:var(--accent)}:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:1px}.nav a.nav-active,.nav button.nav-active{background:var(--accent);border-color:var(--accent);color:#fff}.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:1rem 1.25rem;margin-bottom:1rem;max-width:100%}.counter-wrap{text-align:center;margin:1.5rem 0;padding:1rem;background:var(--counter-bg);border-radius:10px;border:1px solid var(--border)}.counter-text{font-size:1.15rem;margin:.5rem 0;font-weight:500;color:var(--counter-text)}.counter-area{padding:.5rem 0;margin:.5rem auto;max-width:100%;min-height:90px}.counter-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.75rem 1rem;max-width:100%}.counter-canvas-wrap{flex:1 1 12rem;min-width:0;max-width:100%}#counter-canvas{display:block;width:100%;height:85px;cursor:pointer}.sub-text{flex:0 1 auto;font-size:.95rem;color:var(--muted);text-align:left;border-left:3px solid var(--border);padding-left:.75rem;min-height:3rem;display:flex;flex-direction:column;justify-content:center;cursor:pointer;transition:border-color .15s ease}.sub-text:hover{border-left-color:var(--accent)}.sub-text strong{color:var(--counter-text)}.date-form{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:flex-end;max-width:100%}.date-group{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:flex-end;max-width:100%;min-width:0}.date-field{display:flex;flex-direction:column;gap:.2rem;font-size:.9rem;font-weight:500;flex:0 1 auto;min-width:0}.date-field--year input{width:5.5rem;max-width:100%}.date-field--month select{width:10rem;max-width:100%}.date-field--day input,.date-field--time input{width:4.5rem;max-width:100%}.date-form input,.date-form select,.wide{box-sizing:border-box;padding:.4rem .5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);font:inherit}.presets{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1rem}.presets button{padding:.35rem .65rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);cursor:pointer}.metrics{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0 0 .75rem;justify-content:center}.metrics a{color:var(--accent);text-decoration:none;padding:.2rem .5rem;border-radius:4px}.metrics a:hover:not(.active){background:color-mix(in srgb,var(--accent) 14%,transparent)}.metrics a.active{background:var(--accent);color:#fff}.life-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.life-table{width:100%;border-collapse:collapse;font-size:.9rem;table-layout:fixed}.life-table th,.life-table td{border:1px solid var(--border);padding:.4rem .5rem;text-align:left;word-break:break-word}.life-table tr.life-table-row--active td{background:color-mix(in srgb,var(--accent) 18%,transparent)}.life-table tr.life-table-row--clickable{cursor:pointer}.life-table tr.life-table-row--clickable:not(.life-table-row--active):hover td{background:color-mix(in srgb,var(--accent) 8%,transparent)}.life-hint{margin:0 0 .75rem;line-height:1.45;font-size:.85rem}.life-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .75rem;margin-bottom:.75rem;max-width:100%}.life-date-heading{font-weight:600;font-size:.95rem}.life-search{display:flex;align-items:center;gap:.45rem;flex:1 1 12rem;min-width:0;max-width:100%}.life-find-icon{flex-shrink:0;opacity:.85}.life-find-input{flex:1 1 auto;min-width:0;width:100%;max-width:100%;padding:.4rem .55rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:.9rem}.life-find-input:focus{outline:2px solid color-mix(in srgb,var(--accent) 40%,transparent);border-color:var(--accent)}.life-find-input--error{border-color:#e03030}.life-nav,.event-date-row{display:flex;align-items:center;justify-content:center;gap:.5rem;max-width:100%;margin-top:1rem}.events-heading{margin:0 0 .5rem;font-size:1.25rem}.events-hint{margin:0 0 1.25rem;font-size:.9rem;color:var(--muted);line-height:1.45}.event-arrow{flex:0 0 auto;font-size:1.75rem;line-height:1;padding:.25rem .75rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);cursor:pointer}.event-date-box{flex:0 1 auto;text-align:center;padding:0 1rem;border-left:3px solid var(--border);border-right:3px solid var(--border);min-width:10rem}.event-date-year{font-size:2.75rem;font-weight:800;line-height:1;color:var(--accent)}.event-date-day{font-size:1.2rem;font-weight:600;margin-top:.25rem}.event-date-time{font-size:.9rem;color:var(--muted);margin-top:.15rem}.event-title{margin:1.25rem 0 .5rem;font-size:1.15rem;font-weight:600;text-align:center;color:var(--counter-text)}.event-mode{margin:0 0 .35rem;font-size:.9rem;font-weight:500;text-align:center;color:var(--accent)}.event-desc{margin:0 auto .75rem;max-width:36rem;font-size:.95rem;line-height:1.5;text-align:center;color:var(--muted)}.event-index{margin:0;text-align:center;font-size:.85rem;color:var(--muted)}.events-loading{margin:1rem 0;text-align:center;color:var(--muted)}.event-source{margin:0 auto .35rem;max-width:36rem;font-size:.8rem;text-align:center;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.tz-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--border)}.tz-simple{border-top:none;padding-top:.5rem}.tz-local-hint{color:var(--muted);font-size:.95rem}.tz-panel-label{margin:0 0 .75rem}.tz-current{font-weight:600;color:var(--text)}.tz-panel{margin-top:.75rem;padding:.75rem;background:var(--bg);border:1px solid var(--border);border-radius:8px}.tz-area{margin-top:.5rem}.tz-hint{margin:.6rem 0 0;line-height:1.45;font-size:.85rem}.tz-display{margin:.75rem 0 0;font-size:.95rem;color:var(--muted)}.life-nav button{font-size:1.1rem;padding:.25rem .75rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);cursor:pointer}.life-nav button:disabled{opacity:.4;cursor:default}.link-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.link-row #share-link{flex:1 1 12rem;min-width:0;max-width:100%;height:auto}.link-row button{padding:.4rem .75rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);cursor:pointer;font:inherit}.hint{color:var(--muted);font-size:.9rem}.settings-pad label.settings-field{display:flex;flex-direction:column;align-items:stretch;gap:.35rem;margin-bottom:.75rem;font-weight:500}.settings-pad label.settings-field .wide{width:100%;font-weight:400}.settings-pad .text-limit-hint{margin:-.25rem 0 1rem}.share-mode{margin:.75rem 0 1rem;padding:.75rem 1rem;border:1px solid var(--border);border-radius:8px}.share-mode legend{font-weight:600;padding:0 .25rem}.share-option{display:flex;align-items:flex-start;gap:.5rem;margin:.5rem 0 0;cursor:pointer}.share-option input{margin-top:.2rem}.share-annual{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;cursor:pointer}.share-preview{margin:0 0 .75rem;padding:.5rem .75rem;background:var(--bg);border-radius:6px;font-size:.9rem;color:var(--text)}.section-footer{text-align:center;color:var(--muted);font-size:.85rem;padding:1rem 0}body[data-mode="4"] #app{width:100%;min-height:100vh;display:flex;flex-direction:column}body[data-mode="4"] .page{flex:1;display:flex;flex-direction:column;max-width:900px;width:100%;margin:0 auto;padding:1rem;box-sizing:border-box}body[data-mode="4"] .section-header{flex-shrink:0}body[data-mode="4"] .counter-wrap{margin-top:auto;margin-bottom:auto;width:100%}@media(max-width:600px){.section-header{flex-wrap:nowrap;align-items:center}.nav{flex:0 0 auto}.date-form{flex-direction:column;align-items:stretch;gap:1rem}.date-group{width:100%}.date-field--year{flex:1 1 5rem}.date-field--month{flex:2 1 8rem}.date-field--day,.date-field--time{flex:1 1 4rem}.date-field--year input,.date-field--month select,.date-field--day input,.date-field--time input{width:100%}.link-row{flex-direction:column;align-items:stretch}.link-row #share-link{flex:none;width:100%}.counter-row{flex-direction:column;align-items:stretch;gap:.35rem}.counter-canvas-wrap{flex:0 0 auto;width:100%}.sub-text{border-left:none;border-top:2px solid var(--border);padding-left:0;padding-top:.35rem;text-align:center;width:100%;min-height:0}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.section-landing-intro h1{font-size:1.35rem;margin:0 0 .5rem}.section-landing-intro p{margin:0;color:var(--muted);line-height:1.5}.between-form{flex-direction:column;align-items:stretch;gap:1rem}.between-result,.between-open-wrap{margin-top:1rem}.lifegrid-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.35rem}.lifegrid-heading h2{margin:0}.lifegrid-units{display:inline-flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0 .75rem}.lifegrid-unit{font:inherit;cursor:pointer;color:var(--muted);background:none;border:1px solid var(--border);border-radius:6px;padding:.3rem .7rem}.lifegrid-unit:hover{border-color:var(--accent);color:var(--accent)}.lifegrid-unit--active{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.lifegrid-days-hint{color:var(--accent)}.lifegrid-form{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:1rem 1.5rem}.lifegrid-form>.settings-field{display:flex;flex-direction:column;align-items:stretch;gap:.35rem;margin:0;font-weight:500;flex:0 0 auto}.lifegrid-form>.settings-field .wide{width:auto;font-weight:400;box-sizing:border-box}.lifegrid-summary{margin:.75rem 0;color:var(--muted)}.lifegrid-marks-hint{margin-top:-.35rem}.lifegrid-cell-mark{color:var(--accent);font-weight:500}.lifegrid-canvas-wrap{position:relative;width:100%;overflow-x:auto}#lifegrid-canvas{display:block;width:100%;max-width:100%;cursor:pointer}.lifegrid-cell-info{position:fixed;left:50%;bottom:1rem;top:auto;z-index:30;box-sizing:border-box;width:min(calc(100% - 2rem),870px);margin:0;padding:.75rem 1rem;transform:translate(-50%);background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px color-mix(in srgb,var(--text) 12%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.lifegrid-cell-info--top{top:1rem;bottom:auto}.lifegrid-cell-info p{margin:.35rem 0}.lifegrid-fs-exit{display:none}body.lifegrid-fullscreen{overflow:hidden}body.lifegrid-fullscreen .lifegrid-canvas-wrap{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;width:100vw;height:100vh;margin:0;overflow:hidden;background:var(--bg)}body.lifegrid-fullscreen #lifegrid-canvas{width:100vw!important;height:100vh!important;max-width:none}body.lifegrid-fullscreen .lifegrid-fs-exit{display:inline-flex;position:absolute;top:.75rem;right:.75rem;z-index:1002;background:var(--card)}body.lifegrid-fullscreen .lifegrid-cell-info{position:fixed;left:.75rem;right:.75rem;bottom:.75rem;top:auto;z-index:1001;width:auto;transform:none}body.lifegrid-fullscreen .lifegrid-cell-info--top{top:3.25rem;bottom:auto}.popular-counters{margin-bottom:1rem}.popular-counters h2{font-size:1.1rem;margin:0 0 .75rem}.popular-nav{display:flex;flex-wrap:wrap;gap:.5rem 1rem}.popular-link{color:var(--accent);text-decoration:none;font-size:.95rem}.popular-link:hover{text-decoration:underline}.qr-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;gap:.75rem}.qr-modal[hidden]{display:none!important}.qr-modal canvas{background:#fff;padding:8px;border-radius:8px}.saved-item{display:flex;align-items:center;gap:.75rem;margin-bottom:.35rem;flex-wrap:wrap}.saved-item a{color:var(--accent)}