.principles-playground{--pg-gutter:max(32px, calc((100vw - var(--section-max-width)) / 2 + 32px));background:var(--color-blue-deep);margin:0 calc(var(--pg-gutter) * -1) -80px;padding:80px var(--pg-gutter)}@media (max-width:900px){.principles-playground{margin-bottom:-64px;padding-bottom:64px}}@media (max-width:639px){.principles-playground{--pg-gutter:20px}}.reference-principle-grid.promise-grid{gap:16px}.reference-principle-grid.promise-grid>article{flex-direction:column;min-width:0;padding:24px;display:flex}.promise-copy{padding-bottom:24px}.promise-grid .promise-copy h3{letter-spacing:-.03em;color:#f2f1ed;font-size:28px;font-weight:600;line-height:1.15}.promise-grid .promise-copy p{color:#bebeb6;max-width:42ch;margin-top:12px;font-size:16px;line-height:1.5}.promise-experiment{flex-direction:column;flex:1;display:flex}.promise-pixels{aspect-ratio:360/204;color:#deded7;flex:none;width:100%;max-width:320px;height:auto;margin:0 auto 16px;display:block}.promise-demo{color:#f2f1ed;flex-direction:column;flex:1;gap:16px;min-height:300px;font-size:14px;line-height:1.5;display:flex}.promise-demo :is(strong,b){font-weight:500}.promise-grid .promise-instruction{color:#f2f1ed;margin:0;font-size:14px;line-height:1.5}.promise-demo button{min-height:44px;font-size:14px;font-weight:500;transition:background .18s ease-out,color .18s ease-out}.promise-demo button:focus-visible,.promise-demo input:focus-visible{outline-offset:3px;outline:2px solid #89a6ff}.promise-demo svg{flex:none;width:20px;height:20px}.promise-options{border:1px solid #777770;border-radius:32px;gap:4px;padding:4px;display:flex}.promise-options button{color:#c0c0b8;white-space:nowrap;background:0 0;border:0;border-radius:24px;flex:1;padding:8px}.promise-options button[aria-pressed=true]{color:#fff;background:#174df0}.promise-options button:hover{color:#fff;background:#30302e}.promise-options button[aria-pressed=true]:hover{background:#123bc0}.promise-business-result{flex-direction:column;gap:16px;display:flex}.promise-business-result>strong{font-size:18px;line-height:1.4}.promise-business-result ul{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.promise-business-result li{color:#bebeb6;align-items:center;gap:8px;display:flex}.promise-business-result li svg{color:#a6bcff}.promise-ready-head{color:#bebeb6;justify-content:space-between;gap:12px;display:flex}.promise-ready-head>span:last-child{color:#f2f1ed;font-variant-numeric:tabular-nums}.promise-progress{background:#54544f;height:2px}.promise-progress>span{transform-origin:0;background:#89a6ff;height:100%;transition:transform .25s ease-out;display:block}.promise-task-list{flex-direction:column;display:flex}.promise-task{cursor:pointer;align-items:center;gap:12px;min-height:44px;padding-block:8px;display:flex}.promise-task input{appearance:none;cursor:pointer;background:0 0;border:1px solid #92928a;border-radius:4px;flex:none;width:24px;height:24px}.promise-task input:checked{background-color:#174df0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");border-color:#89a6ff}.promise-task>span{font-size:16px}.promise-task.is-complete>span{color:#bebeb6;text-decoration:line-through}.promise-result-row{color:#bebeb6;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;display:flex}.promise-text-action,.promise-back{color:#a6bcff;text-underline-offset:4px;text-align:left;background:0 0;border:0;padding:8px 0;text-decoration:underline}.promise-guide-steps{color:#bebeb6;justify-content:space-between;gap:8px;margin:0;padding:0;list-style:none;display:flex}.promise-guide-steps>li{align-items:center;gap:4px;display:flex}.promise-guide-steps b{border:1px solid #92928a;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;display:flex}.promise-guide-steps>li[data-current=true],.promise-guide-steps>li[data-done=true]{color:#fff}.promise-guide-steps>li[data-current=true] b{background:#174df0;border-color:#89a6ff}.promise-guide-content{flex-direction:column;flex:1;justify-content:center;gap:12px;display:flex}.promise-guide-content>strong{font-size:18px;line-height:1.4}.promise-guide-content>span{color:#bebeb6}.promise-guide-actions{flex-direction:column;gap:8px;margin-top:auto;display:flex}.promise-action{color:#111;text-align:left;background:#f2f1ed;border:0;border-radius:24px;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:8px 16px;display:flex}.promise-action:hover{background:#d6d6cf}.promise-quote-lines{margin:0}.promise-quote-lines>div{grid-template-columns:1fr 1fr;gap:16px;padding:8px 0;display:grid}.promise-quote-lines dt{color:#bebeb6}.promise-quote-lines dd{text-align:right;margin:0;font-size:16px}.promise-grid .promise-context{color:#bebeb6;margin:16px 0 0;font-size:14px;line-height:1.5}.promise-questions{flex-direction:column;flex:1;justify-content:center;display:flex}.promise-questions>div+div{border-top:1px solid #353533}.promise-questions button{color:#f2f1ed;text-align:left;background:0 0;border:0;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:12px 0;font-size:16px;display:flex}.promise-questions button:hover,.promise-questions button[aria-expanded=true]{color:#a6bcff}.promise-questions button>span{font-size:20px}.promise-grid .promise-questions p{color:#bebeb6;margin:0;padding-bottom:16px;font-size:14px;line-height:1.5}.promise-support-state{flex:1;grid-template-columns:24px 1fr;align-items:start;gap:8px 12px;display:grid}.promise-support-symbol{color:#a6bcff;place-items:center;width:24px;height:24px;display:grid}.promise-support-state>strong{align-self:end;font-size:18px;line-height:1.4}.promise-grid .promise-support-state>p{color:#bebeb6;grid-column:2;margin:0;font-size:14px;line-height:1.5}.promise-support-progress{color:#bebeb6;flex-wrap:wrap;justify-content:space-between;gap:8px;display:flex}.promise-support-progress [aria-current=step]{color:#a6bcff;text-underline-offset:4px;text-decoration:underline}@media (min-width:601px){.promise-copy{min-height:132px}}@media (min-width:901px) and (max-width:1200px){.reference-principle-grid.promise-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:900px){.principles-playground .reference-section-head{top:calc(72px + var(--safe-t));z-index:1;background:var(--color-blue-deep);margin-bottom:0;padding-bottom:32px;position:sticky}.reference-principle-grid.promise-grid{display:block}.reference-principle-grid.promise-grid>article{top:calc(140px + var(--safe-t) + var(--i,0) * 60px);background-color:#141413;background-image:linear-gradient(#0000,#141413 22px);margin-bottom:16px;position:sticky}.promise-experiment{display:none}}@media (max-width:600px){.promise-grid .promise-copy h3{font-size:26px}}@media (prefers-reduced-motion:reduce){.promise-demo *,.promise-demo :before,.promise-demo :after{transition:none!important;animation:none!important}}@media (forced-colors:active){.promise-task input{appearance:auto}}