.prop-demo{background:var(--light-bg);border:1px solid var(--border-color);border-radius:6px;padding:24px;margin:24px 0}.prop-demo-label{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--heading-color);margin-bottom:12px;text-align:center}.prop-demo-row{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;align-items:flex-start}.prop-grad-card{width:260px;height:160px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:15px;color:#f1eeee;cursor:pointer;position:relative;overflow:hidden}.prop-grad-card .hover-hint{font-size:13px;opacity:.5}.prop-grad-no{background:linear-gradient(135deg,#3490dc,#6574cd);transition:background 0.8s ease}.prop-grad-no:hover{background:linear-gradient(135deg,#e3342f,#ffb636)}@property --grad-start{syntax:"<color>";inherits:false;initial-value:#3490dc}@property --grad-end{syntax:"<color>";inherits:false;initial-value:#6574cd}.prop-grad-yes{--grad-start:#3490dc;--grad-end:#6574cd;background:linear-gradient(135deg,var(--grad-start),var(--grad-end));transition:--grad-start 0.8s ease,--grad-end 0.8s ease}.prop-grad-yes:hover{--grad-start:#e3342f;--grad-end:#ffb636}@property --rotate-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.prop-angle-box{width:200px;height:200px;border-radius:50%;--rotate-angle:0deg;background:conic-gradient(from var(--rotate-angle),#AE0E38,#E57622,#ffb636,#3490dc,#6574cd,#AE0E38);animation:propSpin 4s linear infinite;display:flex;align-items:center;justify-content:center}.prop-angle-inner{width:130px;height:130px;border-radius:50%;background:var(--light-bg);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--secondary-text);text-align:center;line-height:1.5}@keyframes propSpin{to{--rotate-angle:360deg}}@property --hue{syntax:"<number>";inherits:false;initial-value:220}.prop-hue-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.prop-hue-cell{aspect-ratio:1;border-radius:6px;background:hsl(var(--hue),65%,55%);animation:propHueCycle 6s ease-in-out infinite alternate;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:13px;color:rgb(255 255 255 / .8)}.prop-hue-cell:nth-child(2){animation-delay:-0.5s}.prop-hue-cell:nth-child(3){animation-delay:-1s}.prop-hue-cell:nth-child(4){animation-delay:-1.5s}.prop-hue-cell:nth-child(5){animation-delay:-2s}.prop-hue-cell:nth-child(6){animation-delay:-2.5s}.prop-hue-cell:nth-child(7){animation-delay:-3s}.prop-hue-cell:nth-child(8){animation-delay:-3.5s}@keyframes propHueCycle{0%{--hue:220}50%{--hue:340}100%{--hue:40}}.prop-valid-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.prop-valid-card{width:240px;padding:20px;border-radius:8px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:13px;color:#f1eeee;border:2px dashed rgb(255 182 54 / .3)}@property --safe-size{syntax:"<length>";inherits:false;initial-value:16px}.prop-valid-ok{--safe-size:24px;font-size:var(--safe-size);border-color:rgb(52 211 153 / .5);background:rgb(52 211 153 / .08)}.prop-valid-bad{--safe-size:banana;font-size:var(--safe-size);border-color:rgb(239 68 68 / .5);background:rgb(239 68 68 / .08)}.prop-valid-label{margin-top:10px;font-size:13px!important;color:var(--secondary-text)}@property --border-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.prop-border-card{--border-angle:0deg;width:300px;padding:2px;border-radius:10px;background:conic-gradient(from var(--border-angle),#AE0E38,#E57622,#ffb636,#3490dc,#AE0E38);animation:propBorderSpin 3s linear infinite}.prop-border-inner{background:var(--light-bg);border-radius:8px;padding:24px;text-align:center}.prop-border-inner h4{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--heading-color);margin:0 0 8px}.prop-border-inner p{font-size:13px;color:var(--secondary-text);margin:0;line-height:1.5}@keyframes propBorderSpin{to{--border-angle:360deg}}@property --progress{syntax:"<percentage>";inherits:false;initial-value:0%}.prop-progress-track{width:100%;height:28px;border-radius:14px;background:var(--mid-bg,#181c25);overflow:hidden;position:relative;border:1px solid var(--border-color)}.prop-progress-fill{height:100%;border-radius:14px;background:linear-gradient(90deg,#AE0E38,#E57622,#ffb636);width:var(--progress);animation:propFill 3s ease-in-out infinite alternate}.prop-progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'IBM Plex Mono',monospace;font-size:12px;color:#f1eeee}@keyframes propFill{0%{--progress:5%}100%{--progress:92%}}.prop-inherit-parent{--theme-accent:#ffb636;padding:16px;border:2px solid var(--theme-accent);border-radius:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--secondary-text)}.prop-inherit-child{margin-top:10px;padding:12px;border:2px dashed var(--theme-accent);border-radius:6px;color:var(--theme-accent);text-align:center}.prop-no-inherit-parent{--scoped-accent:#75bbe8;padding:16px;border:2px solid var(--scoped-accent);border-radius:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--secondary-text)}@property --scoped-accent{syntax:"<color>";inherits:false;initial-value:#aeafb4}.prop-no-inherit-child{margin-top:10px;padding:12px;border:2px dashed var(--scoped-accent);border-radius:6px;color:var(--scoped-accent);text-align:center}@media (max-width:640px){.prop-demo-row{flex-direction:column;align-items:stretch}.prop-grad-card{width:100%}.prop-angle-box{width:160px;height:160px}.prop-angle-inner{width:100px;height:100px;font-size:11px}.prop-hue-grid{grid-template-columns:repeat(2,1fr)}.prop-valid-card{width:100%}.prop-border-card{width:100%}}