.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 .8s ease}.prop-grad-no:hover{background:linear-gradient(135deg,#e3342f,#ffb42f)}@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 .8s ease,--grad-end .8s ease}.prop-grad-yes:hover{--grad-start: #e3342f;--grad-end: #FFB42F}@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,#FFB42F,#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:#fffc}.prop-hue-cell:nth-child(2){animation-delay:-.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}to{--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 rgba(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:#34d39980;background:#34d39914}.prop-valid-bad{--safe-size: banana;font-size:var(--safe-size);border-color:#ef444480;background:#ef444414}.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,#FFB42F,#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,#ffb42f);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%}to{--progress: 92%}}.prop-inherit-parent{--theme-accent: #FFB42F;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,.prop-border-card{width:100%}}