.design-guide{--guide-green: #5b3fe6;--guide-green-deep: #2d206f;--guide-mint: #ddd5ff;--guide-orange: #7654ff}.design-guide .guide-hero{background:linear-gradient(118deg,#f5f2ff,#fbfaf7 43%,#f0eeff)}.design-guide .guide-hero:before{background:#7654ff1f}.design-guide .guide-hero:after{border-color:#7654ff26;box-shadow:0 0 0 68px #7654ff06,0 0 0 136px #7654ff05}.design-guide .guide-hero-copy h1{color:#241b53}.design-guide .guide-hero-copy h1 em{color:#6847ef}.design-guide .guide-hero-actions>span i{background:#27b77d}.design-guide .design-interface-shot{max-width:930px}.design-material-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.design-material-grid>article{padding:28px;border:1px solid #e1dff0;border-radius:7px;background:#fff}.design-material-grid>article>span{display:grid;place-items:center;width:48px;height:48px;margin-bottom:22px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#7654ff,#4f35d8);box-shadow:0 10px 24px #5b3fe633;font-size:23px}.design-material-grid small{color:#866ff0;font-size:10px;font-weight:900;letter-spacing:.15em}.design-material-grid h3{margin:8px 0 12px;color:#302756;font-size:23px}.design-material-grid p{margin:0;color:#6e6b79;font-size:15px;line-height:1.85}.design-material-grid ul{display:grid;gap:9px;margin:20px 0 0;padding:17px 18px 17px 37px;border-radius:5px;color:#635f72;background:#f7f5ff;font-size:14px;line-height:1.6}.design-specs{margin-top:20px}.design-task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.design-task-grid article{display:grid;grid-template-columns:55px 1fr;gap:18px;align-items:start;min-height:190px;padding:25px;border:1px solid #e1dff0;border-radius:7px;background:#fff;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}.design-task-grid article:hover{border-color:#9d87ff;box-shadow:0 15px 35px #4932ae14;transform:translateY(-3px)}.design-task-grid article>b{display:grid;place-items:center;width:50px;height:50px;border-radius:12px;color:#6245e5;background:#eeeaff;font-size:20px}.design-task-grid small{color:#897f9d;font-size:11px;font-weight:800}.design-task-grid h3{margin:7px 0 10px;color:#33295a;font-size:20px}.design-task-grid p{margin:0;color:#716d7d;font-size:14px;line-height:1.75}.design-workflow{display:grid;gap:12px;counter-reset:workflow}.design-workflow article{display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:center;min-height:110px;padding:20px 24px;border:1px solid #e1dff0;border-radius:6px;background:#fff}.design-workflow article>b{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#fff;background:#5b3fe6;font-size:12px}.design-workflow h3{margin:0 0 7px;color:#33295a;font-size:19px}.design-workflow p{margin:0;color:#716d7d;font-size:15px;line-height:1.75}.design-prompt-example{display:grid;grid-template-columns:130px 1fr;gap:20px;margin-top:20px;padding:22px;border:1px solid rgba(118,84,255,.25);border-radius:6px;background:#f7f4ff}.design-prompt-example span{color:#6548df;font-size:14px;font-weight:850}.design-prompt-example p{margin:0;color:#625e70;font-size:15px;line-height:1.85}@media(max-width:900px){.design-guide .design-interface-shot{max-width:820px}}@media(max-width:640px){.design-material-grid,.design-task-grid{grid-template-columns:1fr}.design-material-grid>article{padding:23px}.design-task-grid article{min-height:auto}.design-prompt-example{grid-template-columns:1fr;gap:8px}.design-workflow article{grid-template-columns:46px 1fr;gap:14px;padding:18px 16px}.design-workflow article>b{width:42px;height:42px}}