*{box-sizing:border-box}body{margin:0;background:#0d0c11;color:#f5f5f7;font:15px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}a{color:inherit}.demo-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4vw;font-size:12px}.demo-head span{color:#b8b7c1;font-size:10px;letter-spacing:.1em}.demo-foot{max-width:1000px;margin:28px auto;padding:0 24px;font-size:12px;color:#b0acb9}.demo-foot details{margin-top:12px}.shell{--bg:#f4f5f8;--panel:white;--fg:#1c2029;--muted:#606979;color:var(--fg);background:var(--bg);margin:20px auto;width:min(1180px,94vw);min-height:710px;border:1px solid #ffffff30;border-radius:24px;overflow:hidden;box-shadow:0 30px 100px #0006}.topbar{height:55px;background:var(--panel);border-bottom:1px solid #8882;padding:16px 24px;display:flex;justify-content:space-between;align-items:center}.topbar b{font-size:15px}.dots{color:#ff765e;letter-spacing:5px}.layout{display:grid;grid-template-columns:190px minmax(0,1fr)}nav{padding:25px 15px;border-right:1px solid #8882}nav a{display:block;text-decoration:none;padding:12px 15px;border-radius:9px;margin-bottom:7px;color:var(--muted)}nav a.active{background:var(--accent);color:#101119;font-weight:700}nav small{display:block;padding:24px 15px;color:var(--muted)}main{padding:32px;min-width:0}h1{font-size:clamp(26px,3vw,40px);letter-spacing:-.045em;line-height:1.1;margin:6px 0 12px}h2{font-size:20px;letter-spacing:-.02em;margin:0 0 14px}p{color:var(--muted)}.eyebrow{font-size:10px;letter-spacing:.15em;color:var(--muted);text-transform:uppercase}.head{display:flex;justify-content:space-between;gap:15px;align-items:start;margin-bottom:25px}.head p{margin:0;max-width:45ch}.badge{border:1px solid #8884;border-radius:20px;padding:6px 10px;white-space:nowrap;font-size:10px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px}.panel{padding:22px;border-radius:15px;background:var(--panel);border:1px solid #8882}.stack{display:grid;gap:15px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}button,input,textarea,select{font:inherit}button{min-height:42px;padding:10px 16px;border:1px solid #8884;border-radius:10px;background:var(--panel);color:var(--fg);cursor:pointer}button.primary{background:var(--accent);color:#101119;border-color:transparent;font-weight:650}button:hover{filter:brightness(.93)}button[aria-pressed=true]{outline:2px solid var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}input:not([type=checkbox]):not([type=range]):not([type=color]),textarea,select{width:100%;padding:12px;border:1px solid #8885;background:var(--panel);color:var(--fg);border-radius:9px}label{display:grid;gap:7px;font-size:13px}input[type=range]{width:100%;accent-color:var(--accent)}textarea{min-height:150px;resize:vertical}.photo{width:100%;height:330px;object-fit:cover;display:block;border-radius:12px}.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.tiles img{width:100%;height:150px;object-fit:cover;border-radius:9px}.tiles button{text-align:left;padding:12px}.tiles strong{display:block;margin-top:12px}.big{font-size:clamp(45px,6vw,78px);font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.055em;line-height:1.15}.ring{width:220px;height:220px;border-radius:50%;margin:20px auto;display:grid;place-content:center;text-align:center;background:radial-gradient(var(--panel) 61%,transparent 62%),conic-gradient(var(--accent) calc(var(--progress,35)*1%),#8883 0)}.ring .big{font-size:42px}.ring p{margin:0}.timer-art{display:flex;justify-content:center;align-items:end;gap:5px;height:65px;margin:20px 0}.timer-art i{height:var(--bar);width:5px;border-radius:10px;background:var(--accent)}.running .timer-art i{animation:wave 1.2s ease-in-out infinite alternate;animation-delay:var(--delay)}@keyframes wave{to{height:12px}}.breathe{width:190px;height:190px;margin:30px auto;background:radial-gradient(circle at 30% 20%,#ffffff99,transparent 50%),var(--accent);border-radius:50%;box-shadow:0 0 0 16px #ffffff0b,0 0 0 32px #ffffff08}.running .breathe{animation:breath 8s ease-in-out infinite}@keyframes breath{50%{transform:scale(.68);opacity:.55}}.watch{--bg:#050506;--panel:#18181c;--fg:#fff;--muted:#b6b6c0;max-width:410px;min-height:600px;border-radius:66px;border:10px solid #393a40;box-shadow:0 0 0 2px #929298,0 30px 100px #0008}.watch .topbar{background:transparent;border:0;padding:22px 26px;height:64px}.watch .dots{display:none}.watch .layout{display:flex;flex-direction:column-reverse}.watch nav{border:0;padding:5px 18px 20px;display:flex;justify-content:center;gap:3px}.watch nav a{font-size:10px;padding:9px 6px;margin:0}.watch nav small{display:none}.watch main{padding:12px 20px}.watch h1{font-size:29px}.watch .head{margin-bottom:16px}.watch .head p,.watch .badge{display:none}.watch .workspace{display:block}.watch .workspace>aside{margin-top:15px}.watch .panel{padding:16px}.watch .ring{width:190px;height:190px;margin:6px auto}.watch .tiles{grid-template-columns:1fr}.watch .photo{height:140px}.watch .big{font-size:52px}.mac{--bg:#111214;--panel:#1c1e22;--fg:#f5f6f7;--muted:#a1a7b2;border-radius:13px}.mac .panel,.mac button{border-radius:7px}.vision{--bg:#141d28;--panel:#25303be8;--fg:#fff;--muted:#d3d9e2;background:linear-gradient(#0a172899,#07101bd9),var(--scene) center/cover;min-height:760px}.vision .topbar,.vision nav{background:#17232fa8;backdrop-filter:blur(20px)}.vision .panel{backdrop-filter:blur(22px);border-color:#ffffff35;box-shadow:0 15px 40px #0003;border-radius:22px}.vision .layout{grid-template-columns:160px minmax(0,1fr)}.vision .stage{min-height:380px}.stage{display:grid;place-items:center;position:relative;overflow:hidden;border-radius:14px;background:#171f2d;min-height:340px;perspective:750px}.stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}.stage .caption{position:absolute;bottom:18px;left:18px;background:#111b;padding:10px 16px;border-radius:12px;color:white}.solar{width:300px;height:300px;position:relative;border:1px solid #ffffff55;border-radius:50%;transform:rotateX(35deg)}.solar:before{content:'';position:absolute;inset:48px;border:1px solid #ffffff33;border-radius:50%}.sun{position:absolute;top:120px;left:120px;width:60px;height:60px;background:#ffcc69;border-radius:50%;box-shadow:0 0 50px #ffb34988}.planet{position:absolute;top:130px;left:130px;width:30px;height:30px;background:#84bdec;border-radius:50%;transform:rotate(var(--angle,40deg)) translateX(140px)}.cube{width:160px;height:160px;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(var(--angle,35deg)) scale(var(--scale,1));transition:transform .25s}.cube i{position:absolute;inset:0;background:var(--accent);opacity:.8;border:1px solid #fff8}.cube i:nth-child(1){transform:translateZ(80px)}.cube i:nth-child(2){transform:rotateY(90deg) translateZ(80px)}.cube i:nth-child(3){transform:rotateY(180deg) translateZ(80px)}.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(80px)}.cube i:nth-child(5){transform:rotateX(90deg) translateZ(80px)}.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(80px)}.floor{position:relative;height:360px;border:8px solid #b9bbc6;background:repeating-linear-gradient(0deg,transparent 0 29px,#bdc7d844 30px),repeating-linear-gradient(90deg,#fafbff 0 29px,#bdc7d844 30px)}.furniture{position:absolute;left:var(--x,25%);top:var(--y,30%);width:120px;height:70px;background:var(--accent);border-radius:12px;border:5px solid #ffffff50;box-shadow:0 8px 20px #0002;transition:.2s}.floor:after{content:'LIVING ROOM · 4.2 × 5.6 m';position:absolute;bottom:12px;left:15px;font-size:10px;color:#606a7a}.palette{display:flex;height:330px;border-radius:12px;overflow:hidden}.palette div{flex:1;display:flex;align-items:end;justify-content:center;padding:20px 4px;font:12px monospace;color:#fff;text-shadow:0 1px 3px #000}.kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.kanban section{background:#8881;padding:12px;border-radius:12px}.task{margin:12px 0;padding:15px;background:var(--panel);border:1px solid #8883;border-radius:8px}.task small{display:block;margin-bottom:12px;color:var(--muted)}.task button{font-size:11px;padding:4px 8px;min-height:32px}.note{padding:15px;background:var(--panel);border:1px solid #8883;border-radius:10px;white-space:pre-wrap;overflow-wrap:anywhere}.check{display:flex;align-items:center;gap:14px;padding:14px;border-bottom:1px solid #8883}.check input{width:21px;height:21px;accent-color:var(--accent)}canvas{touch-action:none;width:100%;height:330px;background:white;border-radius:12px}.status{min-height:24px;font-size:12px;color:var(--muted);margin-top:16px}.route-map{height:170px;width:100%;background:#16271a;border-radius:12px}.route-map path{fill:none;stroke:var(--accent);stroke-width:5;stroke-dasharray:8}.route-map circle{fill:white}.invoice{background:white;color:#20232b;padding:30px;border-radius:12px}.invoice p{color:#606979}.invoice .row{padding:18px 0;border-bottom:1px solid #ddd}.compact main{padding:20px}.no-motion *{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:750px){.demo-head{flex-wrap:wrap}.demo-head span{order:3;width:100%}.shell{width:96vw;margin:8px auto}.layout,.vision .layout{display:flex;flex-direction:column}.layout nav{display:flex;overflow:auto;padding:10px;border:0}.layout nav a{white-space:nowrap;font-size:12px;margin:0}.layout nav small{display:none}main{padding:20px}.workspace{grid-template-columns:1fr}.tiles{grid-template-columns:1fr 1fr}.kanban{grid-template-columns:1fr}.watch{width:94vw;max-width:390px}.watch .layout{flex-direction:column-reverse}.head{flex-wrap:wrap}.vision .stage{min-height:320px}.solar{width:240px;height:240px}.sun{top:90px;left:90px}.planet{top:100px;left:100px;transform:rotate(var(--angle,40deg)) translateX(105px)}}

.stack{align-content:start}.watch{width:min(360px,94vw);height:490px;min-height:0;border-radius:60px}.watch .topbar{height:48px;padding:12px 22px}.watch .layout{height:calc(100% - 48px);min-height:0}.watch main{overflow-y:auto;flex:1;min-height:0;padding:8px 16px}.watch nav{flex:none;padding:8px 12px 16px}.watch .ring{width:165px;height:165px}.watch .ring .big{font-size:38px}.watch h1{font-size:24px}.watch .head{margin-bottom:10px}.watch .eyebrow{font-size:9px}.watch .workspace>aside{margin-top:20px}.watch .breathe{width:140px;height:140px}.watch .toolbar button{padding:8px 12px}.ipad nav a.active,.ipad button.primary{color:white}
