.desert-bg{position:fixed;inset:0;z-index:-1;overflow:hidden}.sky{position:absolute;inset:0;background:var(--bg)}.landscape-wrap{position:absolute;bottom:0;left:0;right:0;height:160px;overflow:hidden;pointer-events:none}.ground-scroll{display:flex;width:200%;height:100%;animation:scrollGround 40s linear infinite}.landscape{width:50%;height:100%;flex-shrink:0}.contour-line{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}[data-theme=light] .contour-line{stroke:#000}@keyframes scrollGround{0%{transform:translate(0)}to{transform:translate(-50%)}}#app{position:relative;z-index:1}.booking{background:rgba(var(--card-rgb, 249, 250, 251),.92);backdrop-filter:blur(10px);padding:2rem;border-radius:24px;border:1px solid var(--border)}[data-theme=dark] .booking{background:#171717eb}.topic-selector{display:flex;align-items:flex-start;gap:3rem;width:100%;max-width:700px}.topic-list{flex:1;min-width:0}.topic-list h2{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-bottom:1.5rem;font-weight:500}.topic-item{position:relative;padding:1rem 0;border-bottom:1px solid var(--border);cursor:pointer;transition:all .3s ease}.topic-item:first-of-type{border-top:1px solid var(--border)}.topic-name{font-size:1.4rem;font-weight:600;color:var(--text-muted);transition:color .3s ease}.topic-desc{display:block;font-size:.8rem;color:var(--text-muted);opacity:0;max-height:0;overflow:hidden;transition:all .3s ease}.topic-item:hover .topic-name{color:var(--text)}.topic-item:hover .topic-desc{opacity:.6;max-height:1.5rem;margin-top:.4rem}.topic-item.selected .topic-name{color:var(--text)}.topic-item.selected .topic-desc{opacity:1;max-height:1.5rem;margin-top:.4rem}.topic-item:after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--text);transition:width .3s ease}.topic-item.selected:after{width:2.5rem}.topic-arrow{position:absolute;right:0;top:1rem;opacity:0;transition:all .3s ease;color:var(--text-muted);transform:translate(-8px)}.topic-item:hover .topic-arrow,.topic-item.selected .topic-arrow{opacity:1;transform:translate(0)}.topic-item.selected .topic-arrow{color:var(--text)}.preview-panel{width:260px;flex-shrink:0;opacity:0;transform:translate(-10px);transition:all .4s ease;pointer-events:none}.preview-panel.visible{opacity:1;transform:translate(0);pointer-events:auto}.preview-video{position:relative;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--card-bg);aspect-ratio:4/3}.preview-video video{width:100%;height:100%;object-fit:cover}.preview-video .placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.75rem;background:var(--card-bg)}.record-btn{position:absolute;bottom:12px;right:12px;width:44px;height:44px;border:none;border-radius:50%;background:#ef4444;color:#fff;font-size:18px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000004d}.record-btn:hover{transform:scale(1.1);background:#dc2626}.record-btn.recording{animation:pulse-record 1s ease-in-out infinite}@keyframes pulse-record{0%,to{box-shadow:0 0 #ef4444b3}50%{box-shadow:0 0 0 12px #ef444400}}.record-btn .stop-icon{width:16px;height:16px;background:#fff;border-radius:3px}.record-modal{position:fixed;inset:0;background:#000000e6;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}.record-modal video{max-width:100%;max-height:60vh;border-radius:12px;background:#000}.record-modal .controls{margin-top:1.5rem;display:flex;gap:1rem}.record-modal button{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.record-modal .record-start{background:#ef4444;color:#fff}.record-modal .record-stop{background:#fff;color:#000}.record-modal .record-save{background:#22c55e;color:#fff}.record-modal .record-cancel{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}.record-modal button:hover{transform:translateY(-2px)}.record-modal .status{color:#fff;margin-top:1rem;font-size:.9rem}.preview-cta{margin-top:1.25rem;width:100%;padding:.85rem;border:1px solid var(--text);border-radius:5px;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .2s ease;background:transparent;color:var(--text);text-align:center}.preview-cta:hover{background:var(--text);color:var(--bg)}.preview-hint{margin-top:.75rem;font-size:.7rem;color:var(--text-muted);text-align:center}@media(max-width:600px){.topic-selector{flex-direction:column;gap:2rem}.topic-name{font-size:1.2rem}.preview-panel{width:100%}}#app{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}.booking{width:100%;max-width:500px;text-align:center}.booking .back{display:inline-block;margin-bottom:2rem;color:var(--text-muted);cursor:pointer;font-size:1rem}.booking .back:hover{color:var(--text)}.booking .context{color:var(--text-muted);font-size:1rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}.booking h1{font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.booking .subtitle{color:var(--text-muted);font-size:1.2rem;margin-bottom:3rem}.options{display:flex;flex-direction:column;gap:1rem}.option{background:var(--card-bg);border:2px solid var(--border);border-radius:16px;padding:1.5rem;cursor:pointer;transition:all .2s ease}.option:hover{border-color:#22c55e;transform:translateY(-2px)}.option .main{font-size:1.5rem;font-weight:600;color:var(--text)}.option .sub{font-size:.95rem;color:var(--text-muted);margin-top:.25rem}.option.unavailable{opacity:.3;pointer-events:none}.day-grid,.time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.time-option{border-radius:12px;padding:1rem;transition:all .2s ease}.time-option .main{font-size:1.3rem;font-weight:600}.time-option .sub{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}.time-option.status-available{background:#22c55e1a;border:2px solid #22c55e;cursor:pointer}.time-option.status-available .main{color:var(--text)}.time-option.status-available .sub{color:var(--text-muted)}.time-option.status-available:hover{background:#22c55e;transform:translateY(-2px)}.time-option.status-available:hover .main,.time-option.status-available:hover .sub{color:#000}.time-option.status-tentative{background:#fbbf241a;border:2px solid #fbbf24;cursor:pointer}.time-option.status-tentative .main{color:var(--text)}.time-option.status-tentative .sub{color:#d97706}.time-option.status-tentative:hover{background:#fbbf24;transform:translateY(-2px)}.time-option.status-tentative:hover .main,.time-option.status-tentative:hover .sub{color:#000}.time-option.status-booked{background:var(--card-bg);border:2px solid var(--border);cursor:not-allowed;pointer-events:none;opacity:.4}.time-option.status-booked .main{text-decoration:line-through;color:var(--text-muted)}.time-option.status-booked .sub{color:#ef4444}.time-option.status-buffer{background:var(--card-bg);border:2px dashed var(--border);cursor:not-allowed;pointer-events:none;opacity:.35}.time-option.status-buffer .main,.time-option.status-buffer .sub{color:var(--text-muted)}.time-option.status-past{background:var(--card-bg);border:2px solid var(--border);cursor:not-allowed;pointer-events:none;opacity:.25}.time-option.status-past .main{text-decoration:line-through;color:var(--text-muted)}.time-option.status-past .sub{color:var(--text-muted)}.option.past-day{position:relative;pointer-events:none;cursor:not-allowed}.option.past-day:after{content:"";position:absolute;inset:0;background:var(--bg);opacity:.8;border-radius:inherit}.option.past-day .main{text-decoration:line-through}.confirm-check{width:100px;height:100px;margin:0 auto 2rem;border:4px solid #22c55e;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3rem}.confirm-time{font-size:2.5rem;font-weight:700;color:var(--text);margin-bottom:2rem;line-height:1.3}.confirm-btn{display:inline-block;background:#22c55e;color:#000;font-size:1.2rem;font-weight:600;padding:1rem 2.5rem;border-radius:12px;text-decoration:none;cursor:pointer;border:none;transition:all .2s}.confirm-btn:hover{background:#16a34a;transform:translateY(-2px)}.restart{display:block;margin-top:1.5rem;color:var(--text-muted);cursor:pointer;font-size:1rem}.restart:hover{color:var(--text)}.hint{color:var(--text-muted);font-size:.9rem;margin-top:1rem}.booking-form{display:flex;flex-direction:column;gap:1rem;max-width:300px;margin:0 auto}.booking-form input[type=email]{padding:1rem;font-size:1.1rem;border:2px solid var(--border);border-radius:12px;background:var(--card-bg);color:var(--text);text-align:center;outline:none;transition:border-color .2s}.booking-form input[type=email]:focus{border-color:#22c55e}.booking-form input[type=email]::placeholder{color:var(--text-muted)}.booking-form button:disabled{opacity:.7;cursor:not-allowed}.coffee-bg{position:fixed;inset:0;background:url(https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=1920&q=80) center/cover no-repeat;z-index:-1}.coffee-bg:after{content:"";position:absolute;inset:0;background:#00000080}.booking.coffee-mode{background:#000000b3;backdrop-filter:blur(10px);padding:2.5rem;border-radius:24px;border:1px solid rgba(255,255,255,.1)}.booking.coffee-mode h1,.booking.coffee-mode .context,.booking.coffee-mode .subtitle,.booking.coffee-mode .hint,.booking.coffee-mode .confirm-time{color:#fff}.booking.coffee-mode .context,.booking.coffee-mode .subtitle,.booking.coffee-mode .hint{color:#ffffffb3}.booking.coffee-mode .restart{color:#fff9}.booking.coffee-mode .restart:hover{color:#fff}.booking.coffee-mode .confirm-check{border-color:#22c55e;color:#22c55e}body:has(.coffee-bg) header{background:transparent}body:has(.coffee-bg) .logo,body:has(.coffee-bg) .nav-links a{color:#ffffffe6}body:has(.coffee-bg) .nav-links a:hover{color:#fff}body:has(.coffee-bg) #theme-toggle{color:#ffffffb3}body:has(.coffee-bg) #theme-toggle:hover{color:#fff}body:has(.coffee-bg) footer{border-top-color:#ffffff1a;color:#fff9}body:has(.coffee-bg) .footer-logo img{filter:brightness(0) invert(1);opacity:.7}.admin-badge{background:#ef4444;color:#fff;font-size:.65rem;padding:.2rem .5rem;border-radius:4px;margin-left:.5rem;vertical-align:middle}body.admin-mode .footer-logo{outline:2px dashed #ef4444;outline-offset:4px}body.admin-mode .time-option.status-booked{pointer-events:auto;cursor:pointer}.fade-in{animation:fadeIn .4s ease forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.pop-in{animation:popIn .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.reload-btn{display:inline-block;cursor:pointer;opacity:.5;transition:all .2s;margin-left:.3rem;font-size:.9em}.reload-btn:hover{opacity:1}.reload-btn.spinning{animation:spin .6s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:500px){.booking h1{font-size:1.8rem}.day-grid,.time-grid{grid-template-columns:repeat(2,1fr)}.confirm-time{font-size:1.8rem}}