.web-mind { background:#0e0b13;border-block:1px solid #b7a3f526;scroll-margin-top:64px; }
.web-mind-grid { display:grid;gap:44px;align-items:center; }.web-mind h2 { font-size:clamp(40px,5vw,68px); }.web-mind .sub { font-size:17px; }.web-mind-steps { display:flex;flex-wrap:wrap;gap:16px;color:#b7a3f5;font-size:13px;margin:28px 0; }.web-mind-caption { max-width:350px;font-size:13px;color:var(--sub);margin-top:16px; }
.web-resource-grid { display:grid;gap:18px; }.web-resource-grid>a { text-decoration:none;border:1px solid var(--border);border-radius:28px;padding:30px;background:var(--card); }.web-resource-grid small { font-size:13px;letter-spacing:.1em;color:var(--sub); }.web-resource-grid h2 { font-size:36px;margin:18px 0 14px; }.web-resource-grid p { color:var(--sub);font-size:14px; }.web-resource-grid>a>span { display:block;margin-top:26px;color:var(--accent);font-size:13px; }.web-resource-grid>a:last-child>span { color:#db91cf; }
@media(min-width:800px) { .web-mind-grid { grid-template-columns:1.1fr .9fr;gap:80px; }.web-resource-grid { grid-template-columns:1fr 1fr; } }
@media(prefers-reduced-motion:reduce) { .web-thought,.web-mind-orbit span { transition:none; } }

.web-clock-demo { --mind:#b7a3f5;padding:28px 24px;border:1px solid #b7a3f533;border-radius:32px;background:#080809;min-width:0; }
.web-clock-top { display:flex;align-items:center;justify-content:space-between;gap:16px;color:#b7a3f5;font-size:13px;letter-spacing:.1em; }
#web-clock-sound { display:grid;place-items:center;border:1px solid #555;border-radius:50%;width:44px;height:44px;background:none;color:var(--sub); }
#web-clock-sound[aria-pressed=true] { color:#b7a3f5; }
#web-clock-sound svg { width:22px;height:22px; }
.web-clock-demo .mind-duration { margin:36px 0 28px;text-align:center; }
.web-clock-demo .mind-duration p { color:var(--sub);font-size:14px; }
.web-clock-demo output { display:block;font:800 clamp(70px,10vw,100px)/1.15 var(--font-d);letter-spacing:-.055em;font-variant-numeric:tabular-nums;margin:26px 0; }
#web-clock-start { display:block;width:100%;padding:18px;background:#b7a3f5;color:#191122;border:0;border-radius:99px;font:700 17px var(--font); }
#web-clock-reset { display:block;margin:14px auto 0;padding:12px;border:0;background:none;color:var(--sub);font-size:15px; }
.web-clock-note { color:var(--sub);font-size:13px;line-height:1.5;text-align:center;margin-top:22px; }
.web-clock-demo [hidden] { display:none!important; }
#web-clock-hint { margin-top:14px; }
.web-friends .sub { font-size:18px; }
.web-friends .btn { margin-top:26px; }
.web-friends-demo { padding:28px 24px;background:#16180f;border:1px solid #e2eb3a44;border-radius:28px;min-width:0; }
.web-demo-label { font-size:13px;color:var(--accent);letter-spacing:.1em; }
.web-friends-demo article { display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:22px 0;border-bottom:1px solid #ffffff20; }
.web-friend-avatar { background:var(--friend);color:#131313;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;font:700 20px var(--font-d); }
.web-friends-demo h3 { font:700 20px var(--font-d);margin-bottom:4px; }
.web-friends-demo article p { font-size:13px;color:var(--sub);line-height:1.5; }
.web-friends-demo article b { font-size:19px;color:var(--text,#fff); }
.web-friends-demo button { display:grid;justify-items:center;gap:4px;border:1px solid #e2eb3a66;border-radius:15px;padding:10px 8px;min-width:82px;min-height:65px;background:none;color:var(--accent);font-size:13px; }
.web-friends-demo button>span:first-child { font-size:25px;line-height:1; }
.web-friends-demo button[aria-pressed=true] { background:var(--accent);color:#171a07; }
#web-cheer-status { margin-top:18px;color:var(--sub);font-size:13px;line-height:1.5; }
@media(max-width:360px){.web-clock-demo,.web-friends-demo{padding:24px 16px}.web-friends-demo article{gap:8px;grid-template-columns:32px minmax(0,1fr) auto}.web-friend-avatar{width:32px;height:32px}.web-friends-demo h3{font-size:18px}}

.mind-ruler-wrap { position:relative;width:100%;height:100px; }
.mind-ruler { display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x mandatory;height:100%;width:100%;cursor:grab;user-select:none;-webkit-user-select:none;overscroll-behavior-x:contain;mask-image:linear-gradient(to right,transparent,#000 20%,#000 80%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 20%,#000 80%,transparent); }
.mind-ruler::-webkit-scrollbar { display:none; }
.mind-ruler::before,.mind-ruler::after { content:'';flex:0 0 calc(50% - 12px);height:1px; }
.mind-ruler-tick { position:relative;display:block;flex:0 0 24px;height:24px;scroll-snap-align:center; }
.mind-ruler-tick::after { content:'';position:absolute;top:0;bottom:0;left:calc(50% - 1px);width:2px;border-radius:2px;background:#85858d; }
.mind-ruler-tick.major { height:44px; }
.mind-ruler-marker { position:absolute;left:calc(50% - 1.5px);top:3px;bottom:3px;width:3px;border-radius:3px;background:var(--mind);pointer-events:none; }
.mind-ruler.dragging { scroll-snap-type:none;cursor:grabbing; }
.mind-ruler:focus-visible { outline:2px solid var(--mind);outline-offset:-3px;border-radius:12px; }