/* Cloud saving (13 Nov 2026): the drawn watch page, the homepage section and the cloud page extras.
   The watch page uses example "owner" colours (deep teal and coral) to show that it takes the owner's look. */
.wm{--o-bg:#0c2027;--o-panel:#12303a;--o-ac:#ff7a59;--o-text:#effaf8;--o-dim:#9fbcbc;position:relative;margin:0;width:100%;max-width:600px;justify-self:center}
.wm-win{border-radius:18px;overflow:hidden;background:var(--o-bg);border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 80px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,122,89,.08)}
.wm-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#0a171c;border-bottom:1px solid rgba(255,255,255,.06)}
.wm-bar i{width:9px;height:9px;border-radius:50%;background:#ff6159;flex:none}.wm-bar i:nth-child(2){background:#ffbd2e}.wm-bar i:nth-child(3){background:#28c941}
.wm-bar span{flex:1;min-width:0;margin-left:8px;padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.06);color:var(--o-dim);font-size:.74rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-page{padding:clamp(12px,2.4vw,18px) clamp(12px,2.4vw,18px) 44px;color:var(--o-text)}
.wm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.wm-logo{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.92rem;letter-spacing:-.01em}
.wm-logo b{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--o-ac);color:#2a0d05;font-size:.9rem}
.wm-lock{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:99px;background:rgba(255,122,89,.14);color:#ffb39f;font-size:.72rem;font-weight:800}
.wm-lock svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.wm-video{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#f3f5fa}
.wm-video>svg{width:100%;height:100%}
.wm-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--o-ac);display:grid;place-items:center;box-shadow:0 10px 30px -6px rgba(255,122,89,.7)}
.wm-play svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.wm-time{position:absolute;right:10px;bottom:10px;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;font-weight:700}
.wm-title{margin:12px 0 0;font-weight:800;font-size:1rem;letter-spacing:-.01em}
.wm-comments{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:8px}
.wm-ct{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;color:var(--o-dim)}
.wm-ct em{font-style:normal;padding:2px 8px;border-radius:99px;background:rgba(255,234,104,.12);color:var(--lemon,#ffea68);font-size:.66rem;letter-spacing:.02em}
.wm-c{display:flex;gap:10px;align-items:flex-start}
.wm-c p{margin:0;font-size:.8rem;line-height:1.4;color:var(--o-dim);min-width:0}
.wm-c p b{display:block;color:var(--o-text);font-size:.78rem}
.wm-av{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--o-panel);color:var(--o-text);font-size:.72rem;font-weight:800}
.wm-wait{opacity:.6}.wm-wait p{font-style:italic}
.wm-drive{position:absolute;left:12px;bottom:-16px;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:#fff;color:#141a2b;box-shadow:0 18px 40px -16px rgba(0,0,0,.7)}
.wm-drive svg{flex:none;width:30px;height:30px;padding:5px;border-radius:9px;background:#e9f0ff;fill:#2f6bff}
.wm-drive b{display:block;font-size:.8rem;line-height:1.2}.wm-drive small{display:block;font-size:.7rem;color:#5c667c;font-weight:600}
@media (min-width:700px){.wm-drive{left:-18px}}

/* homepage section */
.h3-cloud{padding:clamp(70px,9vw,140px) var(--gut)}
.h3-cloud .h3-head .soon-pill,.h3-ptr .h3-head .soon-pill{margin-bottom:14px}
.cl-grid{max-width:var(--max);margin:0 auto;display:grid;gap:clamp(40px,5vw,72px);align-items:center}
@media (min-width:900px){.cl-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.cl-list{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.cl-list li{position:relative;padding-left:40px}
.cl-list li::before{content:"";position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:8px;background:rgba(47,107,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%237aa3ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.cl-list b{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:1.1rem;letter-spacing:-.01em}
.cl-list b em{font-style:normal;padding:2px 9px;border-radius:99px;background:rgba(255,234,104,.1);color:var(--lemon);font-size:.7rem;font-weight:800;letter-spacing:.03em}
.cl-list span{display:block;color:var(--dim);margin-top:2px}
.cl-star{margin:24px 0 0;font-size:.86rem;color:var(--mute);max-width:56ch}
.cl-go{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}

/* cloud feature page */
.wm-split{display:grid;gap:36px;align-items:center}
.wm-split .cards{grid-template-columns:1fr}
@media (min-width:960px){.wm-split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px}}
@media (min-width:600px) and (max-width:959px){.wm-split .cards{grid-template-columns:1fr 1fr}}
.prose .star-note{font-size:.92rem;color:var(--mute);border-left:3px solid rgba(255,234,104,.5);padding-left:14px}
.page-hero .wm{margin-bottom:22px}

/* cloud page hero: the app's "Saved in Google Drive" list, drawn */
.dm{margin:0;width:100%;max-width:560px;justify-self:center}
.dm-win{border-radius:20px;border:1px solid var(--line2);background:linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:0 40px 80px -40px rgba(0,0,0,.8);padding:clamp(16px,2.6vw,24px);display:grid;gap:16px}
.dm-top b{display:block;font-size:1.1rem;letter-spacing:-.02em}
.dm-top span{display:block;margin-top:2px;font-size:.8rem;color:var(--mute);font-weight:700}
.dm-space{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.dm-space-row{display:flex;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--dim);font-weight:700}
.dm-space-row b{color:var(--text)}
.dm-meter{margin-top:9px;height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.dm-meter i{display:block;width:35%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--blue-hi))}
.dm-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.dm-list li{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;min-width:0}
.dm-list li:nth-child(odd){background:rgba(255,255,255,.025)}
.dm-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(47,107,255,.16)}
.dm-ico svg{width:19px;height:19px;fill:none;stroke:#7aa3ff;stroke-width:1.6;stroke-linejoin:round}
.dm-ico .f{fill:#7aa3ff;stroke:none}
.dm-proj{background:rgba(255,234,104,.12)}.dm-proj svg{stroke:var(--lemon)}
.dm-name{flex:1;min-width:0}
.dm-name b{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-name small{display:block;font-size:.74rem;color:var(--mute);font-weight:600}
.dm-list em{flex:none;font-style:normal;padding:3px 9px;border-radius:99px;background:rgba(63,214,165,.12);color:#6fe3bd;font-size:.68rem;font-weight:800}
.dm-foot{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:radial-gradient(80% 140% at 0% 50%,rgba(255,234,104,.12),transparent 70%);border:1px solid rgba(255,234,104,.22)}
.dm-inf{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--lemon);color:#1a1606;font-size:1.5rem;font-weight:800;line-height:1}
.dm-foot b{display:block;font-size:.95rem}.dm-foot small{display:block;font-size:.76rem;color:var(--dim);font-weight:600}
@media (max-width:420px){.dm-list em{display:none}}