/* CSS visual reference. Each demo uses its own class. */
:root{--bg:#081426;--panel:#11243c;--ink:#eef6ff;--muted:#aec2d9;--cyan:#5edcff;--purple:#b59aff;--orange:#ffc078;--line:#304964;font-family:Arial,Helvetica,sans-serif;font-size:16px;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;line-height:1.6}header,main,footer{width:min(1180px,calc(100% - 32px));margin:auto}header{padding:64px 0 30px}.header-meta{display:flex;align-items:center;justify-content:space-between;gap:16px}.back-link{color:var(--ink);text-decoration:none;padding:7px 12px;border:1px solid var(--line);border-radius:8px;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.back-link:hover{background:var(--panel);border-color:var(--cyan);color:var(--cyan)}.back-link:focus-visible{outline:3px solid var(--orange);outline-offset:4px}h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.1;margin:10px 0}h2{font-size:1.8rem;margin:0 0 12px;color:var(--cyan)}h3{margin:0 0 8px;font-size:1rem}p{margin:8px 0 16px}.intro,.note{color:var(--muted)}.tag{color:var(--cyan);font-weight:700;letter-spacing:.15em}nav{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0}nav a{color:var(--ink);text-decoration:none;padding:6px 12px;border:1px solid var(--line);border-radius:20px}nav a:hover{background:var(--panel)}section{margin:24px 0;padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--panel);scroll-margin-top:20px}.examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}.card{padding:18px;background:#0b1b30;border:1px solid var(--line);border-radius:12px;min-width:0}code{font-family:Consolas,monospace;color:var(--orange);font-size:.85rem;overflow-wrap:anywhere}.label{display:block;margin-bottom:12px}.sample{padding:16px;border-radius:8px;background:#19344f;overflow-wrap:anywhere}.item{background:var(--cyan);color:#071426;padding:10px;text-align:center;border-radius:5px;font-weight:700}.stage{background:#19344f;border:1px dashed #5f7996;padding:12px;min-height:80px}.weight-row{display:grid;grid-template-columns:75px 1fr;gap:15px;border-bottom:1px solid var(--line);padding:10px 0}.weight-row span:last-child{font-size:1.4rem}.font-small{font-size:12px}.font-medium{font-size:20px}.font-large{font-size:32px}.size-parent{font-size:20px}.unit-px{font-size:16px}.unit-rem{font-size:1.5rem}.unit-em{font-size:1.5em}.unit-percent{font-size:150%}.unit-vw{font-size:clamp(16px,3vw,40px)}.width-parent{width:100%;background:#294561;padding:12px}.w-px{width:120px}.w-percent{width:60%}.w-rem{width:10rem}.width-bar{background:var(--purple);color:#071426;margin:10px 0;padding:8px;max-width:100%}.viewport-demo{width:20vw;max-width:100%;height:12vh;min-height:45px;background:var(--purple);color:#071426;padding:8px}.fluid{font-size:clamp(18px,3vw,36px)}.ch-demo{max-width:28ch;border-left:3px solid var(--cyan);padding-left:12px}.display-block{display:block;background:#53c9e6;color:#071426;margin:5px 0;padding:5px}.display-inline{display:inline;background:var(--purple);color:#071426;padding:3px}.display-inline-block{display:inline-block;width:100px;height:55px;margin:5px;background:var(--orange);color:#071426;text-align:center}.display-none{display:none}.visibility-hidden{visibility:hidden}.display-flex{display:flex;gap:8px}.display-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.flex-demo{display:flex;gap:8px}.flex-column{flex-direction:column}.wrap-demo{display:flex;flex-wrap:wrap;gap:8px}.wrap-demo .item{flex:0 0 100px}.nowrap-demo{display:flex;flex-wrap:nowrap;gap:8px;overflow:auto}.nowrap-demo .item{flex:0 0 100px}.justify-demo{display:flex;gap:4px;min-height:70px;align-items:center}.justify-demo .item{padding:8px;width:40px;flex-shrink:0}.align-demo{display:flex;gap:8px;height:130px}.align-demo .item:nth-child(2){font-size:25px}.align-demo .item:nth-child(3){padding-top:22px}.grow-demo{display:flex;gap:8px}.grow-demo .item{flex-basis:0;flex-grow:1}.grow-demo .item:last-child{flex-grow:2}.grid-demo{display:grid;gap:8px}.grid-equal{grid-template-columns:repeat(3,1fr)}.grid-ratio{grid-template-columns:1fr 2fr 1fr}.grid-fixed{grid-template-columns:70px 1fr}.grid-rows{grid-template-columns:repeat(2,1fr);grid-template-rows:45px 85px}.grid-auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,100px),1fr))}.grid-span{grid-template-columns:repeat(3,1fr)}.grid-span .item:first-child{grid-column:1 / 3}.grid-rowspan{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,60px)}.grid-rowspan .item:first-child{grid-row:1 / 3}.grid-areas{grid-template-columns:80px 1fr;grid-template-areas:'header header' 'sidebar content' 'footer footer'}.area-header{grid-area:header}.area-sidebar{grid-area:sidebar}.area-content{grid-area:content}.area-footer{grid-area:footer}.gradient{height:130px;border-radius:10px}.linear-right{background:linear-gradient(to right,#5edcff,#8c7dff)}.linear-angle{background:linear-gradient(135deg,#ffb764,#fa6095,#8c7dff)}.linear-stop{background:linear-gradient(to right,#5edcff 0% 50%,#8c7dff 50% 100%)}.radial{background:radial-gradient(circle,#5edcff,#11243c)}.radial-corner{background:radial-gradient(circle at top left,#ffb764,#8c7dff,#11243c)}.conic{background:conic-gradient(#5edcff,#8c7dff,#ffb764,#5edcff)}.border-demo{background:#19344f;padding:20px;margin:12px 0;text-align:center}.border-solid{border:3px solid var(--cyan)}.border-dashed{border:3px dashed var(--cyan)}.border-dotted{border:3px dotted var(--cyan)}.border-double{border:6px double var(--cyan)}.radius-small{border-radius:8px}.radius-large{border-radius:28px}.radius-pill{border-radius:999px}.radius-circle{border-radius:50%;width:100px;height:100px;display:grid;place-items:center;padding:0;margin:12px auto}.radius-mixed{border-radius:30px 0 30px 0}.shadow{margin:18px;background:#294561;padding:24px;border-radius:10px;text-align:center}.shadow-soft{box-shadow:0 10px 24px #0007}.shadow-offset{box-shadow:8px 8px 0 var(--purple)}.shadow-glow{box-shadow:0 0 22px #5edcff88}.shadow-inset{box-shadow:inset 0 0 18px #000b}.box-stage{background:#ffd9a0;color:#122139;padding:32px;max-width:500px;margin:auto;border:2px dashed #d99139}.box-margin{background:#83bd85;padding:24px;border:2px dashed #396e40}.box-padding{border:8px solid #7a5cca;background:#b7e5ff;padding:24px}.box-content{background:white;padding:12px;text-align:center;color:#122139}.legend{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.legend span{padding:4px 12px;color:#122139;border-radius:4px}.spacing{background:#284460;display:flow-root;padding:4px}.padding-zero{padding:0}.padding-large{padding:24px}.margin-zero{margin:0}.margin-large{margin:24px}.sizing-wrapper{padding:8px;border:1px dashed var(--muted);overflow:auto}.sizing-box{width:180px;padding:20px;border:5px solid var(--purple);background:#294561}.content-box{box-sizing:content-box}.border-box{box-sizing:border-box}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.font-italic{font-style:italic}.underline{text-decoration:underline}.strike{text-decoration:line-through}.tracking{letter-spacing:4px}.line-tight{line-height:1.1}.line-loose{line-height:2}.interaction{border:0;border-radius:10px;padding:15px 24px;background:var(--cyan);color:#071426;font:inherit;font-weight:700}.transition-none:hover{background:var(--purple);transform:translateY(-6px)}.transition-smooth{transition:background-color .3s ease,transform .3s ease,box-shadow .3s ease}.transition-smooth:hover{background:var(--purple);transform:translateY(-6px);box-shadow:0 10px 20px #0006}.interaction:focus-visible{outline:3px solid var(--orange);outline-offset:5px}.cursor-auto{cursor:auto}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.cursor-move{cursor:move}.cursor-help{cursor:help}.cursor-not-allowed{cursor:not-allowed}.cursor-crosshair{cursor:crosshair}.cursor-grab{cursor:grab}.transform-sample{width:100px;margin:25px auto;background:var(--purple);color:#071426;padding:16px;text-align:center}.translate{transform:translateX(20px)}.rotate{transform:rotate(12deg)}.scale{transform:scale(1.15)}footer{padding:30px 0;color:var(--muted)}@media(max-width:600px){.header-meta{align-items:flex-start;flex-direction:column}.back-link{align-self:flex-start}section{padding:18px}.examples{grid-template-columns:1fr}.box-stage{padding:16px}.box-margin,.box-padding{padding:16px}}