:root { --accent: #ff3b30; --glass: rgba(255, 255, 255, 0.7); }
body, html { margin:0; padding:0; width:100%; height:100%; overflow:hidden; background:#e0e0e0; font-family:-apple-system, system-ui, sans-serif; }

#desk-canvas { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:1; touch-action:none; outline: none; }


#wp--skip-link--target {
	margin-top: 0 !important;
}
.tk-slide {
max-width: 100%;
}
/* HIDE ADD BUTTON ON PC */
@media (min-width: 1025px) { #add-btn { display: none !important;  }  .tk-slide video { width:100%; height:600px; object-fit:contain; } }

.dock { position:fixed; bottom:25px; left:50%; transform:translateX(-50%); background:var(--glass); backdrop-filter:blur(20px); padding:10px; border-radius:30px; display:flex; gap:12px; z-index:8000; box-shadow:0 10px 30px rgba(0,0,0,0.15); border:1px solid rgba(255,255,255,0.4); max-width:85vw; overflow-x:auto; scrollbar-width:none; align-items:center; }
.dock-item { width:52px; height:52px; border-radius:50%; background:#fff; cursor:pointer; flex-shrink:0; position:relative; border:2px solid transparent; overflow:hidden; transition:0.2s; }
.dock-item.active { border-color:var(--accent); transform:scale(1.1); }
.dock-item.active svg{ display: block;}
.cam-badge svg {
	display: none;
}
.dock-item img, .dock-item video { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.cam-badge { position: fixed;
	bottom: 10px;
	left: 10px;
	width: 28px;
	height: 28px;
	background: transparent;
	color: #000;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	font-size: 9px;
	z-index: 5; }



#cam-overlay { position:fixed; inset:0; background:#000; z-index:9000; display:none; flex-direction:column; align-items:center; justify-content:center; }
.viewfinder { width:85vw; height:85vw; max-width:380px; max-height:380px; border-radius:24px; overflow:hidden; background:#111; border:4px solid #333; position:relative; }
#cam-preview { width:100%; height:100%; object-fit:cover; }
.rec-btn { width:75px; height:75px; border-radius:50%; border:5px solid #fff; background:transparent; margin-top:30px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.rec-btn-inner { width:55px; height:55px; background:var(--accent); border-radius:50%; transition:0.3s; }
.rec-btn.recording .rec-btn-inner { border-radius:8px; transform:scale(0.6); }
#timer { color:#fff; font-weight:bold; font-size:20px; margin-top:10px; font-family:monospace; }

#note-ui { display:none; flex-direction:column; align-items:center; width:85vw; max-width:350px; margin-top:20px; }
#note-input { background:none; border:none; border-bottom:2px solid #fff; color:#fff; width:100%; text-align:center; font-size:22px; padding:10px; outline:none; }
.save-btn { background:#4CD964; color:#fff; border:none; padding:15px 40px; border-radius:30px; font-weight:bold; margin-top:25px; cursor:pointer; font-size:18px; }
:root :where(.is-layout-constrained) > * {
margin-block-start: 0rem !important;
}
#tiktok { position:fixed; inset:0; background:#000; z-index:10000; display:none; overflow-y:scroll; scroll-snap-type:y mandatory; scrollbar-width:none; max-width: 100%; margin-block-start: 0 !important; }
.tk-slide { width:100%; height:100vh; scroll-snap-align:start; display:flex; align-items:center; justify-content:center; position:relative; }
.tk-slide video { width:100%; height:100%; object-fit:contain; }
.tk-info { position:absolute; bottom:60px; left:25px; color:#fff; text-shadow:0 2px 10px #000; pointer-events:none; }
.close-btn { position:fixed; top:25px; right:25px; color:#fff; background:rgba(0,0,0,0.5); padding:12px; border-radius:50%; z-index:10001; cursor:pointer; display:flex; }

#loader { position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:20000; display:none; flex-direction:column; align-items:center; justify-content:center; color:#fff; }
.spin { width:40px; height:40px; border:4px solid #fff; border-top-color:transparent; border-radius:50%; animation:s 1s linear infinite; margin-bottom:15px; }
@keyframes s { to { transform:rotate(360deg); } }