.dately-card-main { display:flex;flex:1;flex-direction:column;min-width:0; }
.dately-card-actions { display:flex;justify-content:space-between;gap:20px;align-items:center;border-top:1px solid var(--line);padding:20px 4px 4px;margin-top:20px;font:10px var(--mono); }
.dately-card-actions a:first-child { color:var(--cyan); }
.dately-card-actions a:last-child { color:var(--muted); }
.dately-card-actions a:hover { color:var(--text); }
.dately-demo { margin-top:56px;scroll-margin-top:20px; }
.dately-demo [hidden] { display:none !important; }
.dately-demo-heading { display:flex;justify-content:space-between;align-items:end;gap:35px;padding:22px 0 30px; }
.dately-demo-heading h3 { margin:20px 0 0;font:500 clamp(38px,4.2vw,62px)/1 var(--sans);letter-spacing:-.065em; }
.dately-demo-heading h3 em { font:400 1.1em var(--serif);letter-spacing:-.03em;color:var(--cyan); }
.dately-demo-heading>p { max-width:330px;font-size:13px;line-height:1.8;color:var(--muted);margin:0 0 5px; }
.dately-workbench { border:1px solid #49415e;background:var(--panel); }
.dately-workbench-head { display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:59px;padding:18px 28px;border-bottom:1px solid var(--line);background:#222033;font:9px/1.8 var(--mono);letter-spacing:.045em; }
.dately-workbench-head>span:first-child { display:flex;align-items:center;gap:9px;color:var(--text); }
.dately-dot { width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px rgba(169,248,226,.35); }
#dately-connection { color:var(--muted); }
#dately-connection[data-state=online] { color:var(--cyan); }
#dately-connection[data-state=offline] { color:#efbc9e; }
.dately-workbench-grid { display:grid;grid-template-columns:1.03fr .97fr; }
.dately-input-panel { min-width:0;padding:30px;border-right:1px solid var(--line); }
.dately-output-panel { scroll-margin-top:16px;min-width:0;min-height:560px;padding:30px;background:radial-gradient(ellipse at right top,rgba(188,173,255,.06),transparent 80%),#171625; }
.dately-panel-label { display:flex;justify-content:space-between;align-items:center;gap:15px;color:var(--purple);font:9px/1.8 var(--mono);letter-spacing:.08em;margin-bottom:28px; }
.dately-panel-label>span { color:var(--muted);font-size:8px; }
#dately-form label { display:block;font-size:15px;letter-spacing:-.02em;margin-bottom:13px; }
.dately-input-wrap { display:flex;gap:8px;align-items:stretch; }
.dately-input-wrap input { display:block;width:100%;min-width:0;border:1px solid #575069;border-radius:0;background:#11101e;color:var(--text);padding:15px;font:13px var(--mono); }
.dately-input-wrap input::placeholder { color:#8e8aa4;font-size:11px; }
.dately-input-wrap button { display:flex;align-items:center;justify-content:center;gap:20px;border:1px solid var(--cyan);padding:12px 17px;background:var(--cyan);color:#152023;font:11px var(--mono);white-space:nowrap; }
.dately-input-wrap button:hover { background:#d3ffef; }
.dately-input-wrap button:disabled { opacity:.6;cursor:wait; }
.dately-input-wrap button span { font-size:18px; }
#dately-input-note { color:var(--muted);font:9px/1.8 var(--mono);margin:10px 0 22px; }
.dately-examples { display:flex;gap:8px;flex-wrap:wrap; }
.dately-examples>span { flex-basis:100%;font:8px var(--mono);letter-spacing:.07em;color:var(--muted);margin-bottom:4px; }
.dately-examples button { padding:8px 10px;border:1px solid #4a435e;background:transparent;color:#c7c0e1;font:9px/1.5 var(--mono); }
.dately-examples button:hover { color:var(--cyan);border-color:var(--cyan);background:rgba(169,248,226,.035); }
.dately-call { border:1px solid var(--line);background:#141321;padding:18px;margin-top:28px; }
.dately-call>span,.dately-reference>span { font:8px var(--mono);letter-spacing:.07em;color:var(--muted); }
.dately-call pre { margin:14px 0 0;color:var(--cyan);font:11px/1.8 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere; }
.dately-reference { padding-top:21px;margin-top:24px;border-top:1px solid var(--line); }
.dately-reference strong { display:block;font:10px/1.8 var(--mono);font-weight:400;color:#d2cbe7;margin-top:6px; }
.dately-reference p { margin:7px 0 0;max-width:360px;font:9px/1.8 var(--mono);color:var(--muted); }
.dately-message { border:1px dashed #484259;padding:30px 23px;color:var(--muted);font-size:14px;line-height:1.8;margin-top:30px; }
.dately-message.is-error { border-color:#7a5c5a;color:#efbc9e;background:rgba(239,188,158,.035); }
.dately-result-eyebrow { font:8px var(--mono);color:var(--cyan);letter-spacing:.11em; }
#dately-result-summary { margin:13px 0 7px;font:500 clamp(24px,2.5vw,36px)/1.18 var(--sans);letter-spacing:-.055em;color:var(--text); }
#dately-result-caption { color:var(--muted);font:10px/1.8 var(--mono);margin:0 0 23px;overflow-wrap:anywhere; }
.dately-calendar { border:1px solid #474057;background-image:linear-gradient(rgba(188,173,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(188,173,255,.035) 1px,transparent 1px);background-size:33px 33px;padding:18px; }
.dately-calendar-head { display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:16px; }
.dately-calendar-head>span { font:11px var(--mono);color:#d6cee9; }
.dately-calendar-head button { width:29px;height:28px;background:transparent;color:var(--purple);border:1px solid #474057;font:14px var(--mono); }
.dately-calendar-head button:hover { border-color:var(--cyan);color:var(--cyan); }
.dately-weekdays,.dately-calendar-days { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px; }
.dately-weekdays { padding:4px 0 10px;color:#a39cb7;font:8px var(--mono);text-align:center; }
.dately-calendar-days>span { display:grid;place-items:center;min-height:30px;color:#c0b7d7;font:10px var(--mono);border:1px solid transparent; }
.dately-calendar-days>span.outside { color:#6d657e; }
.dately-calendar-days>span.selected { color:#132322;background:var(--cyan);border-color:#b6fae9;font-weight:500; }
.dately-output-foot { display:flex;justify-content:space-between;gap:12px;font:8px/1.8 var(--mono);color:var(--muted);margin-top:14px; }
.dately-raw { border-top:1px solid var(--line);padding:18px 28px;background:#171523; }
.dately-raw summary { display:flex;justify-content:space-between;align-items:center;gap:15px;list-style:none;cursor:pointer;font:10px var(--mono);color:#d4ccea; }
.dately-raw summary::-webkit-details-marker { display:none; }
.dately-raw summary>span { font-size:18px;color:var(--cyan); }
.dately-raw[open] summary>span { transform:rotate(45deg); }
.dately-raw>div { display:grid;grid-template-columns:1fr 1fr;gap:25px;padding-top:20px; }
.dately-raw section { min-width:0; }
.dately-raw h5 { font:8px/1.8 var(--mono);font-weight:400;color:var(--muted);margin:0 0 10px; }
.dately-raw pre { margin:0;background:#11101d;border:1px solid var(--line);padding:15px;max-height:240px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--cyan);font:11px/1.8 var(--mono); }
.dately-demo-foot { display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:16px;font:8px/1.8 var(--mono);color:var(--muted); }
.dately-demo-foot a { color:var(--purple);text-decoration:underline;text-underline-offset:4px;white-space:nowrap; }
.dately-demo :is(button,input,summary,a):focus-visible { outline:2px solid var(--cyan);outline-offset:4px; }
.dately-views { display:flex;gap:8px;margin:0 0 22px;padding:6px;border:1px solid #49415e;background:#141321; }
.dately-views button { flex:1;display:flex;align-items:center;justify-content:center;gap:13px;min-height:48px;padding:12px 18px;border:1px solid transparent;background:transparent;color:var(--muted);font:500 14px/1.5 var(--sans); }
.dately-views button[aria-selected=true] { background:var(--purple);color:#171625;border-color:var(--purple); }
.dately-views button:hover:not([aria-selected=true]) { color:var(--cyan);border-color:#49415e; }
.dately-planning { border:1px solid #49415e;background:var(--panel); }
.dately-planning .dately-workbench { border:0; }
.dately-planning .dately-demo-foot { margin:0;padding:16px 28px; }
.dately-planning-examples { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
.dately-planning-examples>span { grid-column:1/-1;font-size:9px;line-height:1.7;margin-bottom:3px; }
.dately-planning-examples button { text-align:left;min-width:0;padding:12px; }
.dately-planning-examples button strong { display:block;color:var(--text);font:500 12px/1.5 var(--sans); }
.dately-planning-examples button span { display:block;margin-top:5px;font:9px/1.7 var(--mono);overflow-wrap:anywhere; }
.dately-planning-examples button[aria-pressed=true] { border-color:var(--cyan);background:rgba(169,248,226,.06);color:var(--cyan); }
.dately-planning-use { margin:0 0 20px;padding:16px 18px;border-left:2px solid var(--cyan);background:rgba(169,248,226,.035); }
.dately-planning-use>span { color:var(--cyan);font:8px/1.8 var(--mono);letter-spacing:.06em; }
.dately-planning-use h3 { margin:7px 0;color:var(--text);font:500 17px/1.5 var(--sans);letter-spacing:-.02em; }
.dately-planning-use p { margin:0;color:var(--muted);font:12px/1.9 var(--sans); }
.dately-resolved-periods { list-style:none;margin:0 0 20px;padding:0;max-height:220px;overflow:auto;border-top:1px solid var(--line); }
.dately-resolved-periods li { display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font:10px/1.8 var(--mono); }
.dately-resolved-periods li>span { color:var(--muted); }
.dately-resolved-periods strong { color:var(--cyan);font-weight:400;text-align:right; }
@media(max-width:560px) { .dately-views { gap:5px;padding:5px; }.dately-views button { font-size:12px;padding:10px;gap:5px; }.dately-planning-examples { grid-template-columns:1fr; }.dately-resolved-periods li { font-size:9px;gap:8px; } }
@media(max-width:1050px) { .tech-nav-middle { gap:20px; }.dately-workbench-head,.dately-input-panel,.dately-output-panel { padding-inline:23px; }.dately-input-wrap { flex-wrap:wrap; }.dately-input-wrap button { width:100%;justify-content:space-between; } }
@media(max-width:760px) { .dately-demo-heading { display:block; }.dately-demo-heading>p { margin-top:20px;max-width:440px; }.dately-workbench-grid { grid-template-columns:1fr; }.dately-input-panel { border-right:0;border-bottom:1px solid var(--line); }.dately-input-wrap { flex-wrap:nowrap; }.dately-input-wrap button { width:auto; }.dately-calendar { max-width:430px; }.dately-output-panel { min-height:540px; }.dately-raw>div { grid-template-columns:1fr; }.dately-demo { scroll-margin-top:14px; } }
@media(max-width:560px) { .dately-demo { margin-top:38px; }.dately-demo-heading h3 { font-size:43px; }.dately-workbench-head { display:block;padding:15px 19px;font-size:8px; }.dately-workbench-head>span { display:block; }#dately-connection { margin-top:6px;padding-left:15px; }.dately-input-panel,.dately-output-panel { padding:23px 18px; }.dately-panel-label { margin-bottom:22px;font-size:8px; }.dately-input-wrap { flex-wrap:wrap; }.dately-input-wrap input { font-size:12px;padding:14px; }.dately-input-wrap button { width:100%;justify-content:space-between; }.dately-call { padding:15px; }.dately-call pre { font-size:10px; }.dately-calendar { padding:14px; }.dately-raw { padding:17px 18px; }.dately-demo-foot { align-items:start;flex-direction:column;gap:10px; }#dately-result-summary { font-size:29px; }.dately-card-actions { font-size:9px; } }