:root{--space-xs: 6px;--space-sm: 12px;--space-md: 24px;--space-lg: 48px;--space-xl: 72px;--bg: #ffffff;--bg-surface: #f8fafc;--bg-panel: #ffffff;--text: #0f172a;--text-muted: #64748b;--primary: #2563eb;--primary-hover: #1d4ed8;--danger: #dc2626;--border: #e2e8f0;--selection: rgba(37, 99, 235, .15);--transition-state: .3s cubic-bezier(.4, 0, .2, 1);--transition-feedback: .15s ease-out;--transition-utility: .25s cubic-bezier(0, 0, .2, 1);--touch-min: 44px;--touch-ideal: 48px}[data-theme=dark]{--bg: #0f172a;--bg-surface: #1e293b;--bg-panel: #1e293b;--text: #f1f5f9;--text-muted: #94a3b8;--primary: #3b82f6;--primary-hover: #60a5fa;--border: #334155;--selection: rgba(59, 130, 246, .2)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:system-ui,-apple-system,sans-serif;line-height:1.6;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}.skip-link{position:absolute;top:-100%;left:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--primary);color:#fff;text-decoration:none;border-radius:4px;z-index:1000;transition:top var(--transition-feedback)}.skip-link:focus{top:var(--space-md)}.app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.surface{flex:1;padding:var(--space-md);padding-bottom:calc(var(--space-xl) + 200px);background:var(--bg-surface);overflow-y:auto;-webkit-overflow-scrolling:touch}.surface-header{text-align:center;padding:var(--space-lg) 0}.surface-title{font-size:1.75rem;font-weight:700;background:none;border:none;color:var(--text);cursor:pointer;padding:var(--space-sm) var(--space-md);border-radius:8px;min-height:var(--touch-min);transition:background var(--transition-feedback)}.surface-title.selected{background:var(--selection);outline:2px solid var(--primary);outline-offset:2px}.surface-content{max-width:600px;margin:0 auto}.surface-element{display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:var(--space-md);margin-bottom:var(--space-md);cursor:pointer;position:relative;min-height:var(--touch-min);transition:transform var(--transition-feedback),box-shadow var(--transition-feedback),border-color var(--transition-feedback)}.surface-element:active{transform:scale(.98)}.surface-element.selected{border-color:var(--primary);box-shadow:0 0 0 3px var(--selection)}.selection-ring{position:absolute;inset:-3px;border:2px solid transparent;border-radius:14px;pointer-events:none;transition:border-color var(--transition-feedback)}.surface-element.selected .selection-ring{border-color:var(--primary)}.element-hero{text-align:center;padding:var(--space-lg) 0}.element-hero h1{font-size:2rem;margin-bottom:var(--space-xs)}.element-hero p{color:var(--text-muted)}.element-text h2{font-size:1.25rem;margin-bottom:var(--space-sm)}.element-text p{color:var(--text-muted)}.element-contact h2{font-size:1.25rem;margin-bottom:var(--space-sm)}.element-contact p{margin-bottom:var(--space-xs)}.element-contact .placeholder{color:var(--text-muted);font-style:italic}.element-footer{text-align:center;color:var(--text-muted);font-size:.875rem}.bottom-panel{position:fixed;bottom:0;left:0;right:0;background:var(--bg-panel);border-top:1px solid var(--border);padding:var(--space-md);padding-bottom:calc(var(--space-md) + env(safe-area-inset-bottom,0));max-height:50vh;overflow-y:auto;z-index:100;transition:transform var(--transition-utility)}.bottom-panel[data-state=VIEW]{transform:translateY(0)}.bottom-panel[data-state=EDIT],.bottom-panel[data-state=UTILITY]{transform:translateY(0);box-shadow:0 -4px 20px #0000001a}.panel-view{display:flex;justify-content:center}.panel-action{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-surface);border:1px solid var(--border);border-radius:99px;font-size:1rem;color:var(--text);cursor:pointer;min-height:var(--touch-min);transition:background var(--transition-feedback)}.panel-action:active{background:var(--border)}.action-icon{font-size:1.25rem}.panel-back{display:block;width:100%;padding:var(--space-sm);margin-top:var(--space-md);background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;font-size:1rem;color:var(--text);cursor:pointer;min-height:var(--touch-min);transition:background var(--transition-feedback)}.panel-back:active{background:var(--border)}.editor{display:flex;flex-direction:column;gap:var(--space-md)}.editor-title{font-size:1rem;font-weight:600;color:var(--text-muted)}.editor-label{display:flex;flex-direction:column;gap:var(--space-xs);font-size:.875rem;font-weight:500;color:var(--text-muted)}.editor-input,.editor-textarea{width:100%;padding:var(--space-sm);background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;font-size:1rem;color:var(--text);min-height:var(--touch-min);transition:border-color var(--transition-feedback)}.editor-input:focus,.editor-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--selection)}.editor-textarea{resize:vertical;min-height:80px}.editor-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-sm)}.editor-action{flex:1;padding:var(--space-sm);background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;font-size:1.25rem;cursor:pointer;min-height:var(--touch-min);transition:background var(--transition-feedback)}.editor-action:active{background:var(--border)}.editor-action.danger{color:var(--danger)}.editor-undo{padding:var(--space-sm);background:none;border:none;color:var(--primary);font-size:.875rem;cursor:pointer;min-height:var(--touch-min)}.editor-empty{color:var(--text-muted);text-align:center;padding:var(--space-md)}.editor-add{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);color:var(--text-muted);font-size:.875rem}.editor-add-btn{padding:var(--space-xs) var(--space-sm);background:var(--primary);color:#fff;border:none;border-radius:6px;cursor:pointer;min-height:var(--touch-min);min-width:var(--touch-min)}.utility{display:flex;flex-direction:column;gap:var(--space-md)}.utility-title{font-size:1rem;font-weight:600;color:var(--text-muted)}.utility-section{display:flex;flex-direction:column;gap:var(--space-xs)}.utility-section>span{font-size:.875rem;color:var(--text-muted)}.utility-toggle,.utility-btn{padding:var(--space-sm) var(--space-md);background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;font-size:1rem;color:var(--text);cursor:pointer;min-height:var(--touch-min);transition:background var(--transition-feedback)}.utility-toggle:active,.utility-btn:active{background:var(--border)}.utility-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.utility-btn.primary:active{background:var(--primary-hover)}.utility-btn.danger{color:var(--danger);border-color:var(--danger)}.utility-hint{font-size:.75rem;color:var(--text-muted)}*:focus-visible{outline:3px solid var(--primary);outline-offset:2px}@media(hover:hover){.surface-title:hover{background:var(--selection)}.surface-element:hover{border-color:var(--primary)}.panel-action:hover,.panel-back:hover,.editor-action:hover,.utility-toggle:hover,.utility-btn:hover{background:var(--border)}.utility-btn.primary:hover{background:var(--primary-hover)}}