body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #eef2f5;
    margin: 0;
    font-family: system-ui, -apple-system, sans-serif;
}

/* The interactive canvas holding all spawned feathers */
#canvas {
    position: relative;
    width: 95%;
    max-width: 1200px;
    margin:0 auto;
    height: 80vh;
    overflow: hidden;
    background-color: #f0f4f8; /* Soft background */
}

/* ==========================================================================
      UI Spawn Button
   ========================================================================== */
#add-feather-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 100;
    padding: 12px 24px;
    background-color: #0d3b70;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s, background-color 0.2s;
}

#add-feather-btn:hover {
    background-color: rgba(30, 144, 255, 0.95);
    transform: translateY(-2px);
}

#add-feather-btn:active {
    transform: translateY(0);
}
/* ==========================================================================
      Resizer square
   ========================================================================== */
.fboard-resizer {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 10px;
    height: 10px;
    cursor: se-resize;
    z-index: 100;
/* Subtle diagonal grip stripes */
    background: linear-gradient(
        -45deg,
        transparent 50%,
        #94a3b8 50%,
        #94a3b8 60%,
        transparent 60%,
        transparent 75%,
        #94a3b8 75%
    );
    }

/* ==========================================================================
     Feather Container & Variables
   ========================================================================== */
.feather-container {
    container-type: inline-size; /* Tells children to measure against this div's width */
    position: absolute;
    top: 50px;
    left: 50px;
    aspect-ratio: 1 / 2.5;
    width: 35cqw;
/* feather rotate variable */
    transform-origin: center bottom;
    transform: rotate(var(--r,15deg));
    filter: drop-shadow(3px 5px 3px rgba(0, 0, 0, 0.5));
    /* ----------------------------------------------------
       Default/Fallback Variable Definitions
       If JS doesn't supply them, these defaults are used.
       ---------------------------------------------------- */
    --rotation: 15deg;
    --scale: 1;
    
    /* Default Shapes (Classic) */
    --left-shape: polygon(100% 0%, 80% 2%, 70% 5%, 60% 20%, 52% 35%, 48% 55%, 52% 65%, 59% 72%, 67% 78%, 85% 86%, 100% 90%);
    --right-shape: polygon(0% 0, 20% 2%, 30% 6%, 40% 22%, 45% 40%, 43% 55%, 40% 60%, 30% 75%, 15% 85%, 0% 90%);
    
    /* Default Color Scheme */
    --blue-bright: rgba(30, 144, 255, 0.95);
    --blue-sky: rgba(135, 206, 250, 0.9);
    --bar-dark: rgba(25, 25, 30, 1);
    --base-tint: rgba(221, 160, 221, 0.5);

/* Dragging optimizations - Only needed for dragging feather so you can see where the div is - */
/*
    overflow: hidden;
    box-shadow: 0.5cqw 0.5cqw 1.5cqw  rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    cursor: pointer;
    /* Prevents accidentally highlighting text while dragging *
    user-select: none;
    /* Prevents mobile browser scrolling conflict *
    touch-action: none;     
    margin: auto;
    z-index: 5;
*/
}
.feather-body {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
}

.feather-body::before,
.feather-body::after {
    content: '';
    flex-basis: 50%;
    height: 100%;
}
/* Left Vane (Uses Left Custom Variables) */
.feather-body::before {
    background: linear-gradient(-145deg, 
        rgba(255, 255, 255, 1) 10%,       /* Solid White Tip */
        rgba(235, 245, 255, 0.9) 19%, 
        var(--bar-dark) 21%,              /* Black Bar */
        var(--bar-dark) 25%,
        var(--blue-sky) 27%, 
        var(--blue-bright) 32%, 
        var(--bar-dark) 38%,              /* Black Bar */
        var(--bar-dark) 42%,
        var(--blue-sky) 44%, 
        var(--blue-bright) 50%,
        var(--bar-dark) 55%,              /* Black Bar */
        var(--bar-dark) 59%,
        var(--blue-sky) 64%,
        var(--base-tint) 80%              /* Warm Base Wash */
    );
    
    /* New clip-path with a rounded top */
    clip-path: var(--left-shape);         /* Bound to left coordinate variable */
}

/* Right Vane (Uses Right Custom Variables) */
.feather-body::after {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 1) 10%,       /* Solid White Tip */
        rgba(235, 245, 255, 0.9) 17%,
        rgba(176, 196, 222, 0.9) 19%, 
        var(--bar-dark) 21%,              /* Black Bar */
        rgba(40, 45, 50, 1) 25%,
        var(--blue-bright) 27%,
        rgba(40, 45, 50, 1) 39%,
        var(--bar-dark) 55%,
        var(--base-tint) 99%              /* Warm Base Wash */
    );
    clip-path: var(--right-shape);        /* Bound to right coordinate variable */
}
/* ==========================================================================
      Rachis (The Central Shaft)
   ========================================================================== */
.rachis {
    position: absolute;
    top: 3%; /* Start below the tip */
    left: 50%;
    width: 1.5%;
    height: 94%;
    background: linear-gradient(to bottom, #d0d0d0, #404040 95%);
    border-radius: 3px;
    transform: translateX(-50%);
    z-index: 10;
}

/*  These are not used anymore, was creating hairs that whisp out from feather *** 
.wispy-barbs {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
}
.barb {
    position: absolute;
    height: 90px;
    width: 90px;
    border-style: solid;
    border-color: rgba(30, 30, 30, 0.7) transparent transparent transparent;
    border-width: 1.5px;
    border-radius: 50%;
}

.b1 { top: 35%; left: 37%; transform: rotate(115deg); height: 80px; width: 80px; opacity: 0.9; }
.b2 { top: 45%; left: 42%; transform: rotate(130deg); height: 70px; width: 70px; opacity: 0.8; }
.b3 { top: 55%; left: 45%; transform: rotate(145deg); height: 60px; width: 60px; }
.b4 { top: 65%; left: 48%; transform: rotate(160deg); height: 50px; width: 50px; opacity: 0.7; }
*/