:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;color:var(--duo-ink);background:var(--duo-white);font-synthesis:none;--ink:var(--duo-ink);--muted:var(--duo-tertiary);--line:var(--duo-surface);--blue:var(--duo-tertiary);--soft:var(--duo-surface)}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:3px}button{border:0;background:none}a{color:inherit}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}p,h1,h2,h3{margin-top:0}[hidden]{display:none!important}.studio{height:100dvh;display:grid;grid-template-rows:62px minmax(0,1fr) 59px;overflow:hidden}.app-header{display:flex;align-items:center;gap:15px;padding:0 24px;border-bottom:1px solid var(--line);background:var(--duo-white)}.wordmark{display:flex;gap:9px;align-items:center;text-decoration:none;white-space:nowrap}.wordmark strong{font-size:14px;letter-spacing:-.4px}.studio-symbol{display:grid;place-items:center;background:var(--duo-tertiary);color:white;width:28px;height:28px;border-radius:9px;font-weight:700;font-size:23px;letter-spacing:-2px;padding-right:3px}.header-context{font-size:10px;color:var(--muted);margin-left:auto}.demo-badge{font-size:8px;font-weight:650;letter-spacing:1.1px;color:var(--duo-secondary);border:1px solid var(--duo-line);padding:5px 7px;border-radius:4px}#app-content{min-height:0;overflow:hidden}.app-tabs{display:flex;align-items:center;justify-content:center;gap:12px;border-top:1px solid var(--line);background:var(--duo-white);z-index:2;padding:7px 10px}.app-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 19px;border-radius:11px;font-size:11px;font-weight:550;min-width:80px;color:var(--duo-secondary)}.app-tabs button>span[data-icon]{display:flex}.app-tabs button svg{width:18px;height:18px}.app-tabs button[aria-current]{background:var(--soft);color:var(--blue)}.tab-count{font-size:8px;line-height:14px;width:14px;border-radius:5px;background:var(--duo-tertiary);color:var(--duo-white)}.mail-view,.notes-view{display:grid;grid-template-columns:280px minmax(0,1fr);height:100%}.message-list,.notes-list{min-height:0;overflow:auto;background:var(--duo-white);border-right:1px solid var(--line)}.list-heading{padding:22px 21px 14px;display:flex;justify-content:space-between;align-items:center}.list-heading h1{font-size:25px;letter-spacing:-1px;margin:0;font-weight:700}.list-heading h1 small{font-size:12px;letter-spacing:0;color:var(--duo-secondary);font-weight:400;margin-left:4px}.icon-button{display:grid;place-items:center;min-width:32px;min-height:32px;padding:5px;color:var(--blue);border-radius:8px;font-size:24px}.icon-button:hover{background:var(--soft)}.search{display:flex;gap:7px;align-items:center;background:var(--duo-surface);margin:0 16px 13px;padding:8px 10px;border-radius:9px;color:var(--duo-secondary)}.search svg{width:14px;height:14px}.search input{width:100%;border:0;outline:0;background:none;font-size:11px;color:var(--ink);min-width:0}.list-filter{display:flex;gap:4px;padding:0 16px 13px}.list-filter button{font-size:10px;padding:5px 9px;border-radius:6px;color:var(--duo-secondary)}.list-filter button[aria-pressed="true"]{background:var(--duo-surface);color:var(--duo-secondary);font-weight:600}.mail-row{width:100%;text-align:left;padding:15px 18px;border-top:1px solid var(--duo-line);display:flex;gap:11px;position:relative}.mail-row:hover{background:var(--duo-surface)}.mail-row.selected{background:var(--duo-surface)}.avatar{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;font-size:10px;font-weight:650;background:var(--duo-surface);color:var(--duo-secondary);flex-shrink:0}.avatar.teal{background:var(--duo-subtle);color:var(--duo-secondary)}.avatar.peach{background:#f9e4d5;color:#b08059}.avatar.blue{background:var(--duo-surface);color:var(--duo-secondary)}.row-copy{min-width:0;flex:1}.row-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-size:11px;font-weight:600;margin-bottom:5px}.row-top time{font-size:8px;font-weight:400;color:var(--duo-secondary);white-space:nowrap}.row-copy h2{font-size:11px;line-height:1.4;margin:0 0 4px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-copy p{font-size:10px;color:var(--duo-secondary);line-height:1.5;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.unread-dot{width:5px;height:5px;border-radius:50%;background:var(--duo-tertiary);position:absolute;left:7px;top:21px}.detail{overflow:auto;background:var(--duo-white);position:relative}.detail-toolbar{height:55px;display:flex;align-items:center;padding:0 24px;gap:8px;border-bottom:1px solid var(--line)}.detail-toolbar>.section-label{font-size:10px;color:var(--duo-secondary);margin-right:auto}.detail-toolbar .icon-button svg{width:16px;height:16px}.back-button{display:none;align-items:center;gap:5px;color:var(--blue);font-size:11px;margin-right:auto;min-height:32px}.back-button svg{width:15px;height:15px}.message-body{padding:25px 30px 28px;max-width:660px;margin:0 auto}.eyebrow{font-size:8px;letter-spacing:1.6px;text-transform:uppercase;font-weight:650;color:var(--duo-secondary)}.message-body h1{font-size:28px;line-height:1.15;letter-spacing:-1.1px;font-weight:650;margin:9px 0 20px;max-width:380px}.sender{display:flex;gap:10px;align-items:center;margin-bottom:22px}.sender .avatar{width:33px;height:33px}.sender strong{font-size:10px;display:block;margin-bottom:3px}.sender p{font-size:9px;color:var(--duo-secondary);margin:0}.sender time{margin-left:auto;font-size:9px;color:var(--duo-secondary)}.letter{font-size:12px;line-height:1.85;color:var(--duo-secondary);max-width:490px}.letter p{margin-bottom:14px}.letter strong{color:var(--duo-ink);font-weight:550}.attachment{display:flex;gap:10px;align-items:center;border:1px solid var(--duo-line);border-radius:10px;padding:11px 13px;margin:19px 0;max-width:330px;text-decoration:none;text-align:left;width:100%}.attachment>span:first-child{display:grid;place-items:center;border-radius:7px;width:34px;height:40px;background:var(--duo-surface);color:var(--duo-secondary);font-size:9px;font-weight:700}.attachment strong{font-size:10px;display:block;font-weight:550}.attachment small{font-size:9px;color:var(--duo-secondary);display:block;margin-top:5px}.attachment svg{width:16px;margin-left:auto;color:var(--duo-secondary)}.reply{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--blue);background:var(--soft);padding:9px 14px;border-radius:8px}.reply svg{width:15px;height:15px}.empty{padding:30px;color:var(--duo-secondary);text-align:center;font-size:12px}.notes-list .mail-row{padding:17px 21px}.notes-list .row-copy h2{font-size:12px}.note-date{font-size:9px;color:var(--duo-secondary);margin-top:8px}.notes-editor{padding:25px 31px;max-width:720px;margin:auto}.note-meta{display:flex;justify-content:space-between;color:var(--duo-secondary);font-size:9px;margin-bottom:18px}.note-title{display:block;width:100%;font-size:28px;letter-spacing:-1px;font-weight:650;padding:0;border:0;background:none;outline:none;color:var(--duo-ink);margin-bottom:15px}.note-text{width:100%;resize:none;border:0;outline:0;font-size:13px;line-height:1.9;color:var(--duo-secondary);min-height:95px;background:none;padding:0}.note-checklist{padding-top:15px;border-top:1px solid var(--line);margin-top:15px}.check-row{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--duo-secondary);padding:8px 0}.check-row input{accent-color:var(--duo-tertiary);width:16px;height:16px;margin:0}.check-row:has(input:checked)>span{text-decoration:line-through;color:var(--duo-secondary)}.note-callout{display:flex;gap:10px;align-items:center;background:#f6f4ed;border:1px solid #ede8d7;color:#a09269;border-radius:9px;padding:12px;font-size:10px;margin-top:20px;line-height:1.6}.media-view{height:100%;overflow:auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);background:var(--duo-white)}.player-main{padding:22px 30px;display:flex;flex-direction:column;justify-content:center;align-items:center}.album-art{width:clamp(150px,25vw,220px);aspect-ratio:1;border-radius:14px;position:relative;overflow:hidden;background:linear-gradient(155deg,var(--duo-tertiary) 0%,var(--duo-tertiary) 37%,var(--duo-blue) 38%,var(--duo-tertiary) 58%,var(--duo-blue) 59%,var(--duo-subtle) 90%);box-shadow:0 15px 35px rgba(29, 29, 31, 0.133);isolation:isolate}.album-art:before{content:"";position:absolute;inset:10% -25% 20%;border-radius:50%;background:radial-gradient(ellipse,#ecdfccbb,transparent 65%);filter:blur(8px)}.album-art:after{content:"";position:absolute;inset:60% -15% -45%;border-radius:50%;background:repeating-radial-gradient(ellipse at 50% 0,var(--duo-tertiary) 0 2px,var(--duo-tertiary) 3px 5px,var(--duo-tertiary) 7px 10px);transform:rotate(-9deg);opacity:.65}.album-lettering{position:absolute;inset:15px;z-index:1;color:#f9f4eb;display:flex;flex-direction:column;justify-content:space-between;font-size:9px;letter-spacing:2.5px}.album-lettering strong{font:italic 36px Georgia,serif;letter-spacing:-2px;line-height:.95;max-width:130px;font-weight:400}.track-heading{text-align:center;margin:16px 0 13px}.track-heading h1{font-size:19px;letter-spacing:-.5px;margin:0 0 4px}.track-heading p{color:var(--duo-secondary);font-size:10px;margin:0}.seek{width:min(100%,260px)}.seek input{width:100%;height:3px;display:block;accent-color:var(--duo-tertiary);cursor:pointer;margin:0}.seek>div{display:flex;justify-content:space-between;font-size:8px;color:var(--duo-secondary);margin-top:8px}.player-controls{display:flex;align-items:center;gap:27px;margin-top:8px}.player-controls button{display:grid;place-items:center;color:var(--duo-secondary);min-width:34px;min-height:34px}.player-controls .play-button{width:43px;height:43px;border-radius:50%;background:var(--duo-tertiary);color:var(--duo-white);box-shadow:0 4px 12px rgba(134, 134, 139, 0.196)}.player-controls svg{width:18px;height:18px;fill:currentColor;stroke-width:1}.up-next{padding:28px 24px 24px 5px;display:flex;flex-direction:column;justify-content:center}.up-next .eyebrow{color:var(--duo-secondary)}.up-next h2{font-size:24px;letter-spacing:-.8px;font-weight:550;margin:7px 0 10px;color:var(--duo-secondary)}.up-next>p{font-size:11px;line-height:1.8;color:var(--duo-secondary);max-width:230px}.queue{margin-top:15px}.queue button{display:flex;align-items:center;gap:11px;text-align:left;width:100%;padding:12px 0;border-top:1px solid var(--duo-line)}.mini-art{width:38px;height:38px;border-radius:7px;background:linear-gradient(145deg,var(--duo-tertiary),var(--duo-tertiary) 50%,var(--duo-subtle));display:grid;place-items:center;color:var(--duo-white);font:italic 17px Georgia,serif}.queue button:nth-child(2) .mini-art{background:linear-gradient(140deg,#d3c7b0,var(--duo-tertiary))}.queue button:nth-child(3) .mini-art{background:linear-gradient(140deg,var(--duo-tertiary),var(--duo-tertiary))}.queue strong{font-size:11px;font-weight:550;display:block;color:var(--duo-secondary)}.queue small{font-size:9px;color:var(--duo-secondary);display:block;margin-top:4px}.queue button>span:last-child{margin-left:auto;color:var(--duo-secondary);font-size:9px}.queue button.active strong{color:var(--duo-secondary)}.audio-note{font-size:9px!important;line-height:1.6!important;color:var(--duo-secondary)!important;margin-top:16px}.layout-view{height:100%;overflow:auto;background:var(--duo-white);padding:25px 27px}.layout-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:19px}.layout-heading h1{font-size:24px;letter-spacing:-.8px;margin:0 0 6px}.layout-heading p{font-size:10px;line-height:1.6;color:var(--duo-secondary);margin:0}.live-label{font-size:8px;letter-spacing:1px;color:var(--duo-secondary);display:flex;align-items:center;gap:5px;white-space:nowrap}.live-label:before{content:"";height:5px;width:5px;border-radius:50%;background:var(--duo-tertiary)}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.metric{border:1px solid var(--duo-line);background:var(--duo-white);border-radius:10px;padding:15px}.metric span{font-size:9px;color:var(--duo-secondary);display:block;margin-bottom:8px}.metric strong{font-size:23px;font-weight:550;letter-spacing:-1px;color:var(--duo-secondary)}.metric small{font-size:10px;letter-spacing:0;color:var(--duo-secondary);margin-left:3px}.layout-card{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--duo-line);border-radius:12px;overflow:hidden;background:var(--duo-white)}.layout-diagram{padding:22px;background:var(--duo-surface);display:flex;align-items:center;justify-content:center;gap:7px}.diagram-pane{background:var(--duo-surface);border:1px solid var(--duo-line);border-radius:7px;height:110px;width:32%;padding:9px}.diagram-pane:last-child{width:60%;background:var(--duo-white)}.diagram-pane i{display:block;height:5px;background:var(--duo-subtle);margin-bottom:7px;border-radius:3px}.diagram-pane:last-child i:nth-child(2){width:70%;background:var(--duo-surface)}.layout-explanation{padding:20px}.layout-explanation h2{font-size:14px;margin:0 0 8px;letter-spacing:-.3px}.layout-explanation p{font-size:10px;line-height:1.8;color:var(--duo-secondary);margin:0}.layout-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}.layout-actions button{border:1px solid var(--duo-line);border-radius:7px;padding:8px 10px;font-size:10px;color:var(--duo-secondary);background:var(--duo-white)}.layout-actions button[aria-pressed="true"]{background:var(--duo-tertiary);color:var(--duo-white);border-color:var(--duo-tertiary)}.bounds-on .studio{outline:3px solid var(--duo-line);outline-offset:-3px}.bounds-on main>*{outline:1px dashed var(--duo-line);outline-offset:-8px}.session-note{font-size:9px;color:var(--duo-secondary);margin:14px 0 0;line-height:1.7}#toast{position:fixed;bottom:75px;left:50%;transform:translate(-50%,12px);max-width:90%;width:max-content;padding:10px 16px;background:rgba(29, 29, 31, 0.918);color:white;font-size:11px;border-radius:9px;opacity:0;pointer-events:none;z-index:20;transition:opacity .18s,transform .18s}#toast.visible{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid var(--duo-line);box-shadow:0 20px 70px rgba(29, 29, 31, 0.22);border-radius:16px;padding:0;width:min(480px,92%);color:var(--ink);max-height:90dvh}dialog::backdrop{background:rgba(29, 29, 31, 0.251);backdrop-filter:blur(3px)}dialog form{padding:18px 22px}dialog header{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}dialog h2{font-size:18px;letter-spacing:-.5px;margin:0}dialog label{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);font-size:11px;color:var(--duo-secondary);padding:9px 0}dialog input{border:0;padding:5px;width:100%;min-width:0;font-size:12px;outline:0;color:var(--ink)}dialog .message-label{display:block}dialog textarea{width:100%;height:110px;resize:vertical;display:block;border:0;outline:0;padding:12px 0;font-size:12px;color:var(--ink);line-height:1.6}dialog footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px}dialog footer>span{font-size:9px;color:var(--duo-secondary)}.primary{background:var(--blue);color:var(--duo-white);border-radius:8px;padding:10px 13px;font-size:11px}.large-text{font-size:16px}.large-text .letter,.large-text .note-text{font-size:16px}.large-text .row-copy h2,.large-text .check-row{font-size:14px}
@media(max-width:620px){.app-header{padding:0 17px;gap:8px}.header-context{display:none}.demo-badge{margin-left:auto;font-size:7px}.mail-view,.notes-view{grid-template-columns:1fr}.mail-view:not(.show-detail) .detail,.notes-view:not(.show-detail) .detail{display:none}.mail-view.show-detail .message-list,.notes-view.show-detail .notes-list{display:none}.back-button{display:flex}.detail-toolbar>.section-label{display:none}.message-list,.notes-list{border:0}.list-heading{padding-top:20px}.mail-row{padding:17px 20px}.row-top{font-size:13px}.row-copy h2{font-size:13px}.row-copy p{font-size:12px}.row-top time{font-size:10px}.avatar{width:37px;height:37px;font-size:12px}.message-body{padding:22px}.message-body h1{font-size:27px}.letter{font-size:13px}.sender strong{font-size:11px}.sender p,.sender time{font-size:9px}.app-tabs{gap:2px;padding:6px}.app-tabs button{min-width:0;flex:1;padding:10px 6px;gap:6px;font-size:10px}.app-tabs button svg{width:16px;height:16px}.tab-count{display:none}.notes-editor{padding:22px}.note-text{font-size:14px;min-height:110px}.media-view{grid-template-columns:1fr}.player-main{padding:20px 23px}.album-art{width:175px}.track-heading{margin:14px 0}.track-heading h1{font-size:21px}.up-next{padding:0 25px 22px;display:block}.up-next>p,.up-next>.eyebrow,.up-next>h2{display:none}.queue{margin-top:12px}.layout-view{padding:21px 18px}.layout-heading{align-items:flex-start}.layout-heading h1{font-size:23px}.metric-grid{gap:6px}.metric{padding:12px 10px}.metric strong{font-size:20px}.metric span{font-size:8px}.layout-card{grid-template-columns:1fr}.layout-diagram{padding:17px}.diagram-pane{height:85px}.layout-explanation{padding:17px}.layout-explanation p{font-size:11px}.layout-actions button{font-size:11px}.session-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}