:root{--bg-base: #fafaf9;--bg-surface: #ffffff;--bg-overlay: #f5f5f4;--bg-card: rgba(255, 255, 255, .9);--accent-primary: #6366f1;--accent-secondary: #818cf8;--accent-glow: rgba(99, 102, 241, .2);--text-primary: #1c1917;--text-secondary: #57534e;--text-muted: #a8a29e;--border-subtle: rgba(0, 0, 0, .08);--border-medium: rgba(0, 0, 0, .12);--danger: #dc2626;--danger-bg: rgba(220, 38, 38, .1);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--transition-fast: .15s ease;--transition-normal: .25s ease;--circle-size: 80px;--z-back: -1;--z-normal: 1;--z-content: 10;--z-sticky: 100;--z-fixed: 1000;--z-modal: 2000;--z-drag: 9999}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:radial-gradient(circle at 50% 0%,#fff,#eeeff2);color:var(--text-primary);min-height:100vh;min-height:100dvh;margin:0;padding:0;overflow-y:auto}.app-layout{display:grid;grid-template-columns:1fr;min-height:100vh;background:var(--bg-base)}.nav-column{display:none}.main-content{width:100%;margin:0 auto;padding-bottom:calc(80px + env(safe-area-inset-bottom))}@media (min-width: 500px){.app-layout{display:grid;grid-template-columns:80px 1fr;max-width:680px;margin:0 auto;gap:0}.nav-column{display:flex;flex-direction:column;height:100vh;position:sticky;top:0;border-right:1px solid var(--border-subtle);z-index:var(--z-sticky)}.main-content{padding-bottom:40px;width:100%;max-width:600px;border-right:1px solid var(--border-subtle)}}@media (min-width: 1024px){.app-layout{grid-template-columns:260px 1fr;max-width:860px}}.main-nav{display:flex;flex-direction:column;height:100%;width:100%;align-items:center}@media (min-width: 1024px){.main-nav{align-items:flex-start;padding-left:20px}}.nav-logo-container{padding:12px;margin-bottom:20px;border-radius:50%;transition:var(--transition-fast);cursor:pointer}.nav-logo-container:hover{background:var(--bg-overlay)}.nav-logo-icon{font-size:32px;color:var(--accent-primary)}.nav-items{display:flex;flex-direction:column;gap:8px;width:100%}.nav-item{display:flex;align-items:center;padding:12px;border-radius:9999px;border:none;background:transparent;cursor:pointer;transition:var(--transition-fast);color:var(--text-primary);text-decoration:none;font-size:1.25rem;gap:16px;width:fit-content}.nav-item .icon{font-size:28px}.nav-item .label{display:none;font-weight:500}@media (min-width: 1024px){.nav-item .label{display:block}.nav-item{padding:12px 24px 12px 16px}}.nav-item:hover{background:var(--bg-overlay)}.nav-item.active{font-weight:700}.nav-item.active .icon{font-variation-settings:"FILL" 1}.nav-item-special{background:var(--accent-primary);color:#fff;border-radius:9999px;justify-content:center;box-shadow:var(--shadow-md);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.nav-item-special:hover{background:var(--accent-secondary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.nav-item-special .icon{font-size:32px}.nav-item-special.active{background:var(--accent-primary);color:#fff}.nav-item-special.active .icon{font-variation-settings:"FILL" 0}@media (max-width: 500px){.nav-item-special{width:64px;height:64px;border-radius:50%;padding:0;position:absolute;top:-32px;left:50%;transform:translate(-50%);border:6px solid var(--bg-surface);box-shadow:0 8px 24px #6366f180;z-index:var(--z-content);display:flex;align-items:center;justify-content:center}.nav-item-special:active{transform:translate(-50%) scale(.95)}.nav-item-special .label{display:none}.main-nav{position:relative;overflow:visible;display:flex;justify-content:center}.nav-items{display:flex;flex-direction:row;width:100%;justify-content:space-around;align-items:center;padding:0 20px;position:relative}}.nav-footer{margin-top:auto;width:100%}.mobile-header{display:none}@media (max-width: 500px){.app-layout{display:block}.nav-column{display:flex;position:fixed;bottom:0;top:auto;left:0;right:0;width:100%;height:calc(60px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-right:none;border-top:1px solid var(--border-subtle);background:#fffffff2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:var(--z-fixed);box-shadow:0 -4px 20px #0000000d}.main-nav{height:60px;width:100%;position:relative}.nav-items{display:flex;flex-direction:row;width:100%;height:100%;justify-content:space-around;align-items:center;padding:0 10px}.nav-item{flex:1;justify-content:center;height:100%;border-radius:0;padding:0}.nav-item:active{background:transparent;opacity:.7}.nav-item.nav-item-special{position:absolute;top:-28px;left:50%;transform:translate(-50%);width:56px;height:56px;border-radius:50%;background:var(--accent-primary);color:#fff;box-shadow:0 4px 12px #6366f166;border:4px solid var(--bg-surface);z-index:10;flex:none;padding:0;margin:0}.nav-item.nav-item-special:active{transform:translate(-50%) scale(.95);background:var(--accent-primary)}.nav-item.nav-item-special .icon{font-size:32px}.nav-item.nav-item-special .label,.nav-logo-container,.nav-footer{display:none}.mobile-header{display:flex;align-items:center;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));position:sticky;top:0;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:var(--z-sticky);border-bottom:1px solid var(--border-subtle);justify-content:center}.main-content{padding-bottom:calc(100px + env(safe-area-inset-bottom))}}.view-container{padding:16px}.view-title{font-size:1.25rem;margin-bottom:20px;font-weight:800;padding-left:16px}.studio-container{display:flex;flex-direction:column;align-items:center;padding-top:20px;gap:20px}.timeline-view .post-card{background:var(--bg-surface);border:1px solid var(--border-subtle);padding:16px;margin-bottom:1px;cursor:pointer;transition:background .2s}.post-card:hover{background:var(--bg-overlay)}.post-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.user-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent-primary)}.user-info{display:flex;gap:4px}.username{font-weight:700}.post-time{color:var(--text-muted)}.mini-canvas-preview{width:100%;height:200px;background:#f8f9fa;border-radius:12px;margin-top:12px;position:relative;overflow:hidden;border:1px solid var(--border-subtle)}.preview-circle{position:absolute;width:40px;height:40px;border-radius:50%}.post-actions{display:flex;justify-content:space-between;margin-top:12px;max-width:80%}.icon-btn{background:transparent;border:none;color:var(--text-muted);display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.9rem}.icon-btn:hover{color:var(--accent-primary)}.icon-btn .material-symbols-rounded{font-size:18px}.like-btn:hover{color:#f5c518}.like-btn.liked .like-count{color:#f5c518;font-weight:600}.like-btn.like-pop .material-symbols-rounded{animation:likePop .4s ease}@keyframes likePop{0%{transform:scale(1)}30%{transform:scale(1.4)}60%{transform:scale(.9)}to{transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding-bottom:20px}.gallery-item{aspect-ratio:1;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);overflow:hidden;position:relative;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.gallery-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);z-index:10}.gallery-thumbnail{width:100%;height:100%;background:#f8f9fa}.mini-canvas-container{width:100%;height:100%}.local-badge{position:absolute;top:6px;right:6px;background:var(--accent-primary);color:#fff;font-size:.65rem;font-weight:800;padding:2px 6px;border-radius:4px;z-index:5;box-shadow:0 2px 4px #0003;letter-spacing:.5px}.gallery-item .rank{position:absolute;top:4px;left:6px;font-weight:900;font-size:1.1rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);z-index:5;font-family:Outfit,sans-serif}.gallery-item.local-work .rank{color:var(--accent-secondary);text-shadow:0 1px 3px rgba(0,0,0,.8)}.gallery-info{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,#000c,#0000);color:#fff;padding:24px 8px 6px;font-size:.75rem;opacity:0;transition:opacity .2s;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}.gallery-item:hover .gallery-info{opacity:1}.gallery-info .meta{display:flex;justify-content:space-between;align-items:center;width:100%}.gallery-info .title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}.gallery-info .likes{display:flex;align-items:center;gap:2px;font-weight:600}.gallery-info .likes .material-symbols-rounded{font-size:14px;color:#ff6b6b;font-variation-settings:"FILL" 1}.mini-canvas-placeholder{width:100%;height:100%;background:#e5e7eb;display:flex;align-items:center;justify-content:center}.canvas-wrapper{position:relative;width:350px;height:350px;background:var(--bg-surface);overflow:hidden;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);flex-shrink:0;margin:0 auto}.canvas{width:100%;height:100%;position:absolute;top:0;left:0;cursor:crosshair;overflow:visible;touch-action:none;isolation:isolate;z-index:1}.canvas.select-mode{cursor:pointer}.canvas.limit-reached{cursor:not-allowed}.border-overlay{position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid var(--border-medium);border-radius:var(--radius-xl);pointer-events:none;z-index:var(--z-fixed)}.toolbar{background:#ffffffa6;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-lg);padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 4px 20px -1px #00000014,inset 0 0 0 1px #ffffff80}.mode-toggle{display:flex;background:var(--bg-overlay);border-radius:var(--radius-md);padding:4px;position:relative;isolation:isolate}.mode-indicator{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:var(--bg-surface);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:0;pointer-events:none}.mode-indicator.mode-place{transform:translate(0)}.mode-indicator.mode-select{transform:translate(100%)}.mode-btn{display:flex;align-items:center;justify-content:center;padding:8px 12px;border:none;border-radius:var(--radius-sm);cursor:pointer;background:transparent;color:var(--text-muted);transition:color .2s ease;-webkit-tap-highlight-color:transparent;z-index:1;flex:1;position:relative}.mode-btn .material-symbols-rounded{font-size:20px}.mode-btn:hover{color:var(--text-secondary)}.mode-btn.active{background:transparent;color:var(--accent-primary);box-shadow:none}.color-section{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}.color-picker-wrapper{width:32px;height:32px;flex-shrink:0}.color-picker-wrapper input[type=color]{width:100%;height:100%;border:none;border-radius:var(--radius-sm);cursor:pointer;background:transparent;padding:0}.color-picker-wrapper input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-picker-wrapper input[type=color]::-webkit-color-swatch{border-radius:var(--radius-sm);border:2px solid var(--border-medium)}.preset-colors{display:flex;gap:6px;flex-wrap:wrap}.color-btn{width:24px;height:24px;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:var(--transition-fast);-webkit-tap-highlight-color:transparent;box-shadow:var(--shadow-sm)}.color-btn:hover{transform:scale(1.15);box-shadow:0 4px 12px #00000026}.color-btn:active{transform:scale(.95)}.color-btn.active{border-color:var(--text-primary);transform:scale(1.15)}.actions{display:flex;gap:4px}.btn{display:flex;align-items:center;justify-content:center;padding:8px;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast);-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.9)}.btn .material-symbols-rounded{font-size:20px}.icon-dashed-circle{width:20px;height:20px;border:2px dashed currentColor;border-radius:50%;display:inline-block;box-sizing:border-box}.btn-ghost.btn-delete:not(:disabled){color:var(--danger);opacity:.8}.btn-ghost.btn-delete:not(:disabled):hover{background:var(--danger-bg);opacity:1}.btn:disabled{opacity:.2;pointer-events:none;cursor:not-allowed}.btn-ghost{background:transparent;color:var(--text-muted)}.btn-ghost:hover{background:var(--bg-overlay);color:var(--text-secondary)}.btn-ghost:active{background:var(--border-medium);transition:none}.circle{position:absolute;width:var(--circle-size);height:var(--circle-size);border-radius:50%;cursor:pointer;transition:box-shadow var(--transition-fast),transform var(--transition-fast);transform:translate(-50%,-50%) scale(1);z-index:1;-webkit-tap-highlight-color:transparent;box-shadow:var(--shadow-md);animation:popIn .1s cubic-bezier(.34,1.56,.64,1) forwards}.studio-actions{display:flex;justify-content:space-between;width:350px;gap:12px}.post-btn{flex:2;display:flex;align-items:center;justify-content:center;gap:8px;height:48px;font-size:1rem;box-shadow:var(--shadow-md)}.post-btn .material-symbols-rounded{font-size:24px}.secondary-actions{display:contents}.btn-secondary{flex:1;background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border-medium);height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-fast);width:auto}.btn-secondary:hover{background:var(--bg-overlay);border-color:var(--text-primary);color:var(--text-primary)}.btn-secondary:active{transform:scale(.95)}.timer-display{display:flex;align-items:center;gap:8px;background:var(--bg-surface);padding:8px 16px;border-radius:9999px;box-shadow:var(--shadow-sm);border:1px solid var(--border-medium);margin:0 auto;font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums;transition:all .3s}.canvas-header.timer-warning .timer-display{color:var(--danger);border-color:var(--danger);background:var(--danger-bg);animation:pulse 1s infinite}.canvas-header.timer-starting .timer-display{color:var(--accent-primary);background:var(--bg-surface);border-color:var(--accent-primary);box-shadow:0 0 30px var(--accent-glow);animation:startPulse .8s cubic-bezier(.25,1,.5,1)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes startPulse{0%{transform:scale(.5);opacity:0}30%{transform:scale(1.6);border-color:var(--accent-primary);color:var(--accent-primary)}50%{transform:scale(1.2)}70%{transform:scale(1.5);border-color:var(--accent-primary);color:var(--accent-primary)}to{transform:scale(1)}}.start-overlay{position:absolute;top:60px;left:0;right:0;bottom:80px;display:flex;align-items:center;justify-content:center;background:#fff9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;border-radius:var(--radius-xl)}.start-card{background:var(--bg-surface);padding:32px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);text-align:center;max-width:280px;border:1px solid var(--border-subtle)}.start-card h2{font-size:1.5rem;margin-bottom:8px}.start-card p{color:var(--text-secondary);margin-bottom:24px}.start-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1.1rem;padding:12px}.time-up-notify{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000c;color:#fff;padding:16px 32px;border-radius:9999px;font-weight:800;font-size:1.5rem;pointer-events:none;z-index:200;animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);animation:fadeIn .2s ease-out}.modal{background:var(--bg-surface);width:90%;max-width:400px;padding:24px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);animation:slideUp .3s cubic-bezier(.16,1,.3,1)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modal-title{font-weight:700;font-size:1.1rem}.modal-close{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:50%;transition:background .2s}.modal-close:hover{background:var(--bg-overlay);color:var(--text-primary)}.code-input{width:100%;height:120px;padding:12px;border:1px solid var(--border-medium);border-radius:var(--radius-md);background:var(--bg-base);font-family:monospace;font-size:.9rem;resize:none;margin-bottom:16px}.code-input:focus{outline:2px solid var(--accent-primary);border-color:transparent}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.btn-primary{background:var(--accent-primary);color:#fff;padding:10px 20px;border:none;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:background .2s,transform .1s}.btn-primary:hover{background:var(--accent-secondary)}.btn-primary:active{transform:scale(.96)}.btn-success{background:var(--success);color:#fff;padding:10px 20px;border:none;border-radius:var(--radius-md);font-weight:600;cursor:auto;transition:background .2s,transform .1s;display:flex;align-items:center;justify-content:center;gap:8px}.header-actions{display:flex;gap:8px;margin-bottom:12px;width:100%;justify-content:flex-end;padding-right:16px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.circle.selected{box-shadow:0 0 0 3px #fff,0 0 0 5px #00000026,var(--shadow-lg);z-index:10;cursor:grab}.circle.dragging{opacity:.9;cursor:grabbing;z-index:var(--z-drag);transform:translate(-50%,-50%) scale(1.05)}.canvas.place-mode .circle{pointer-events:none}@media (max-width: 440px){body{padding:16px}.app{gap:12px}.header h1{font-size:1.25rem}.logo .material-symbols-rounded{font-size:24px}.toolbar{padding:10px;gap:8px}.mode-btn{padding:6px 10px}.color-btn{width:22px;height:22px}.color-picker-wrapper{width:28px;height:28px}.circle-counter{top:8px;right:8px;padding:4px 8px;font-size:.7rem}}@keyframes popIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}