.device-sidebar{background:var(--bg-muted);border-right:1px solid var(--hairline);width:28%;padding:var(--space-s);flex-direction:column;gap:2px;display:flex}.device-sidebar-header{font-family:var(--font-serif);font-size:var(--type-xs);padding:var(--space-xs) 6px var(--space-s);color:var(--ink);font-weight:600}.device-sidebar-sub{color:var(--ink-4);font-size:8px;font-weight:400;font-family:var(--font-sans)}.device-sidebar-item{padding:var(--space-xs) 6px;font-size:8px;font-weight:500;font-family:var(--font-sans);color:var(--ink-3);border-radius:5px;align-items:center;gap:5px;display:flex}.device-sidebar-item.active{background:var(--bg);color:var(--ink);box-shadow:0 1px 2px #1c1a160a, 0 0 0 .5px var(--hairline-strong)}.device-sidebar-dot{border-radius:var(--radius-full);background:var(--ink-4);flex-shrink:0;width:4px;height:4px}.device-sidebar-item.active .device-sidebar-dot{background:var(--accent)}.device-main{padding:var(--space-s);background:var(--bg-clear);flex:1;overflow:hidden}.device-main-title{font-family:var(--font-serif);font-size:var(--type-s);color:var(--ink);margin-bottom:var(--space-s);font-weight:500}.device-main-subtitle{color:var(--ink-4);margin-bottom:var(--space-s);font-size:8px}.device-grade-header{gap:var(--space-s);margin-bottom:6px;padding-left:76px;display:flex}.device-grade-header-cell{width:6px;color:var(--ink-4);text-align:center;font-size:5px;font-family:var(--font-mono)}.device-grade-header-avg{width:20px;color:var(--ink-4);text-align:right;font-size:5px;font-family:var(--font-mono)}.device-grade-grid{gap:3px;display:grid}.device-grade-row{color:var(--ink-3);border-bottom:.5px solid var(--hairline);align-items:center;gap:6px;padding:2px 0;font-size:7px;display:flex}.device-grade-row:last-child{border-bottom:none}.device-grade-name{text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;width:70px;overflow:hidden}.device-grade-dots{gap:var(--space-s);flex:1;display:flex}.device-grade-dot{border-radius:var(--radius-full);flex-shrink:0;width:6px;height:6px}.device-grade-score{text-align:right;width:20px;font-family:var(--font-mono);color:var(--ink-2);font-size:7px}.device-diary{padding:10px var(--space-s);background:var(--bg-clear);flex:1;overflow:hidden}.device-diary-title{font-size:var(--type-xs);font-family:var(--font-serif);color:var(--ink);margin-bottom:6px;font-weight:500}.device-diary-date{color:var(--ink);margin-bottom:var(--space-s);font-size:9px;font-weight:600;font-family:var(--font-sans)}.device-diary-activity{color:var(--ink-2);align-items:center;gap:6px;padding:3px 0;font-size:7px;display:flex}.device-diary-bullet{border-radius:var(--radius-full);flex-shrink:0;width:5px;height:5px}.device-diary-notes{padding:var(--space-s);background:var(--bg);color:var(--ink-2);border-radius:6px;margin-top:10px;font-family:Caveat,cursive;font-size:9px;line-height:1.5}.device-iphone-screen{background:var(--bg-clear);width:100%;height:100%;padding:var(--space-l) 10px 10px;align-items:center;gap:var(--space-s);flex-direction:column;display:flex}.device-iphone-title{font-family:var(--font-serif);font-size:var(--type-xs);color:var(--ink);font-weight:500}.device-iphone-subtitle{color:var(--ink-4);font-size:7px}.device-donut-wrap{width:60px;height:60px;margin:var(--space-s) 0;position:relative}.device-donut-svg{width:100%;height:100%}.device-donut-center{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.device-donut-number{font-family:var(--font-mono);font-size:var(--type-m);color:var(--ink);font-weight:600;line-height:1}.device-donut-of{color:var(--ink-4);font-size:6px}.device-legend{width:100%;padding:0 var(--space-s);flex-direction:column;gap:3px;display:flex}.device-legend-row{color:var(--ink-3);align-items:center;gap:5px;font-size:7px;display:flex}.device-legend-swatch{border-radius:var(--radius-full);flex-shrink:0;width:5px;height:5px}.device-legend-count{font-family:var(--font-mono);color:var(--ink-2);margin-left:auto;font-size:7px}.landing-devices{height:500px;position:relative}.landing-device-ipad{aspect-ratio:4/3;background:var(--bg);border-radius:var(--radius-lg);border:2px solid var(--hairline-strong);width:100%;max-width:540px;box-shadow:0 24px 80px rgba(var(--accent-rgb), .12), 0 4px 16px rgba(var(--accent-rgb), .06);position:relative;overflow:hidden}.landing-device-ipad-secondary{aspect-ratio:4/3;background:var(--bg);border-radius:var(--radius-md);border:2px solid var(--hairline-strong);width:80%;max-width:460px;box-shadow:0 24px 80px rgba(var(--accent-rgb), .15), 0 4px 16px rgba(var(--accent-rgb), .08);z-index:2;position:absolute;bottom:-32px;left:20%;overflow:hidden}.landing-device-iphone{aspect-ratio:9/19.5;background:var(--bg);border-radius:var(--radius-xl);border:2px solid var(--hairline-strong);width:140px;box-shadow:0 16px 48px rgba(var(--accent-rgb), .18), 0 2px 8px rgba(var(--accent-rgb), .08);z-index:3;position:absolute;bottom:-16px;right:-24px;overflow:hidden}.device-screen{width:100%;height:100%;display:flex;overflow:hidden}@media (width<=1024px){.landing-devices{min-height:480px}.landing-device-iphone{width:124px;bottom:-8px;right:0}.landing-device-ipad-secondary{bottom:-24px;left:16%}}@media (width<=640px){.landing-devices{min-height:380px}.landing-device-iphone{border-radius:var(--radius-lg);width:96px}.landing-device-ipad-secondary{border-radius:var(--radius-md);bottom:-16px;left:12%}}