<div
            style="
                display: flex;
                gap: 0;
                min-height: 350px;
                border-radius: 12px;
                overflow: hidden;
                border: 1px solid var(--color_line_secondary);
            "
        >
            <nav
                class="ss-c-rail"
                style="
                    width: 72px;
                    background: var(--color_fill_secondary);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 16px 0;
                    gap: 8px;
                "
            >
                <a
                    href="#"
                    class="ss-c-rail--item active"
                    style="
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 12px;
                        border-radius: 12px;
                        background: var(--ss-color-accent); color: #ffffff;
                        color: white;
                        text-decoration: none;
                        width: 56px;
                    "
                >
                    <span style="font-size: 20px">⌂</span>
                    <span style="font-size: 10px; margin-top: 4px">Home</span>
                </a>
                <a
                    href="#"
                    class="ss-c-rail--item"
                    style="
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 12px;
                        border-radius: 12px;
                        text-decoration: none;
                        width: 56px;
                        opacity: 0.7;
                    "
                >
                    <span style="font-size: 20px">⌕</span>
                    <span style="font-size: 10px; margin-top: 4px">
                        Search
                    </span>
                </a>
                <a
                    href="#"
                    class="ss-c-rail--item"
                    style="
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 12px;
                        border-radius: 12px;
                        text-decoration: none;
                        width: 56px;
                        opacity: 0.7;
                    "
                >
                    <span style="font-size: 20px">▦</span>
                    <span style="font-size: 10px; margin-top: 4px">Stats</span>
                </a>
                <a
                    href="#"
                    class="ss-c-rail--item"
                    style="
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 12px;
                        border-radius: 12px;
                        text-decoration: none;
                        width: 56px;
                        opacity: 0.7;
                    "
                >
                    <span style="font-size: 20px">⚙</span>
                    <span style="font-size: 10px; margin-top: 4px">
                        Settings
                    </span>
                </a>
            </nav>
            <main style="flex: 1; padding: 24px; background: white">
                <h4 style="margin: 0 0 12px">Main Content Area</h4>
                <p style="margin: 0; opacity: 0.7">
                    This is where your main content would appear alongside the
                    navigation rail.
                </p>
            </main>
        </div>

<div
            style="
                display: flex;
                gap: 0;
                min-height: 350px;
                border-radius: 12px;
                overflow: hidden;
                border: 1px solid var(--color_line_secondary);
            "
        >
            <nav
                class="ss-c-rail ss-c-rail--extended"
                style="
                    width: 240px;
                    background: var(--color_fill_secondary);
                    padding: 20px 12px;
                "
            >
                <div
                    style="
                        padding: 0 12px 20px;
                        border-bottom: 1px solid var(--color_line_secondary);
                        margin-bottom: 16px;
                    "
                >
                    <h3 style="margin: 0; font-size: 18px">Dashboard</h3>
                </div>
                <a
                    href="#"
                    class="ss-c-rail--item active"
                    style="
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        padding: 12px 16px;
                        border-radius: 8px;
                        background: var(--ss-color-accent); color: #ffffff;
                        color: white;
                        text-decoration: none;
                        margin-bottom: 4px;
                    "
                >
                    <span style="font-size: 18px">⌂</span>
                    <span>Home</span>
                </a>
                <a
                    href="#"
                    class="ss-c-rail--item"
                    style="
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        padding: 12px 16px;
                        border-radius: 8px;
                        text-decoration: none;
                        margin-bottom: 4px;
                        opacity: 0.8;
                    "
                >
                    <span style="font-size: 18px">▤</span>
                    <span>Projects</span>
                </a>
                <a
                    href="#"
                    class="ss-c-rail--item"
                    style="
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        padding: 12px 16px;
                        border-radius: 8px;
                        text-decoration: none;
                        margin-bottom: 4px;
                        opacity: 0.8;
                    "
                >
                    <span style="font-size: 18px">☺</span>
                    <span>Team</span>
                </a>
                <a
                    href="#"
                    class="ss-c-rail--item"
                    style="
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        padding: 12px 16px;
                        border-radius: 8px;
                        text-decoration: none;
                        margin-bottom: 4px;
                        opacity: 0.8;
                    "
                >
                    <span style="font-size: 18px">▦</span>
                    <span>Calendar</span>
                </a>
                <div
                    style="
                        margin-top: auto;
                        padding-top: 16px;
                        border-top: 1px solid var(--color_line_secondary);
                    "
                >
                    <a
                        href="#"
                        class="ss-c-rail--item"
                        style="
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            padding: 12px 16px;
                            border-radius: 8px;
                            text-decoration: none;
                            opacity: 0.8;
                        "
                    >
                        <span style="font-size: 18px">⚙</span>
                        <span>Settings</span>
                    </a>
                </div>
            </nav>
            <main style="flex: 1; padding: 24px; background: white">
                <h4 style="margin: 0 0 12px">Extended Rail Content</h4>
                <p style="margin: 0; opacity: 0.7">
                    Extended rail provides more space for labels and additional
                    navigation items.
                </p>
            </main>
        </div>

<div style="display: flex; flex-direction: column; gap: 16px">
            <!-- Collapsed State -->
            <div
                style="
                    display: flex;
                    gap: 0;
                    min-height: 200px;
                    border-radius: 12px;
                    overflow: hidden;
                    border: 1px solid var(--color_line_secondary);
                "
            >
                <nav
                    class="ss-c-rail ss-c-rail--collapsed"
                    style="
                        width: 64px;
                        background: #1a1a2e;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 16px 0;
                        gap: 4px;
                    "
                >
                    <button
                        style="
                            width: 44px;
                            height: 44px;
                            border: none;
                            background: transparent;
                            color: white;
                            cursor: pointer;
                            border-radius: 8px;
                            font-size: 20px;
                        "
                    >
                        ☰
                    </button>
                    <div
                        style="
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            gap: 4px;
                            margin-top: 12px;
                        "
                    >
                        <a
                            href="#"
                            style="
                                width: 44px;
                                height: 44px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: rgba(255, 255, 255, 0.1);
                                border-radius: 8px;
                                color: white;
                                text-decoration: none;
                            "
                        >
                            ⌂
                        </a>
                        <a
                            href="#"
                            style="
                                width: 44px;
                                height: 44px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border-radius: 8px;
                                color: white;
                                text-decoration: none;
                                opacity: 0.6;
                            "
                        >
                            ▦
                        </a>
                        <a
                            href="#"
                            style="
                                width: 44px;
                                height: 44px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border-radius: 8px;
                                color: white;
                                text-decoration: none;
                                opacity: 0.6;
                            "
                        >
                            ♪
                        </a>
                    </div>
                </nav>
                <main style="flex: 1; padding: 20px; background: white">
                    <span
                        style="
                            font-size: 12px;
                            opacity: 0.6;
                            text-transform: uppercase;
                        "
                    >
                        Collapsed State
                    </span>
                </main>
            </div>
            <!-- Expanded State -->
            <div
                style="
                    display: flex;
                    gap: 0;
                    min-height: 200px;
                    border-radius: 12px;
                    overflow: hidden;
                    border: 1px solid var(--color_line_secondary);
                "
            >
                <nav
                    class="ss-c-rail ss-c-rail--expanded"
                    style="
                        width: 220px;
                        background: #1a1a2e;
                        padding: 16px;
                        color: white;
                    "
                >
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            margin-bottom: 24px;
                        "
                    >
                        <span style="font-weight: 600">Navigation</span>
                        <button
                            style="
                                width: 32px;
                                height: 32px;
                                border: none;
                                background: rgba(255, 255, 255, 0.1);
                                color: white;
                                cursor: pointer;
                                border-radius: 6px;
                            "
                        >
                            ✕
                        </button>
                    </div>
                    <a
                        href="#"
                        style="
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            padding: 12px;
                            background: rgba(255, 255, 255, 0.1);
                            border-radius: 8px;
                            color: white;
                            text-decoration: none;
                            margin-bottom: 8px;
                        "
                    >
                        <span>⌂</span>
                        Home
                    </a>
                    <a
                        href="#"
                        style="
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            padding: 12px;
                            border-radius: 8px;
                            color: white;
                            text-decoration: none;
                            opacity: 0.7;
                            margin-bottom: 8px;
                        "
                    >
                        <span>▦</span>
                        Analytics
                    </a>
                    <a
                        href="#"
                        style="
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            padding: 12px;
                            border-radius: 8px;
                            color: white;
                            text-decoration: none;
                            opacity: 0.7;
                        "
                    >
                        <span>♪</span>
                        Notifications
                    </a>
                </nav>
                <main style="flex: 1; padding: 20px; background: white">
                    <span
                        style="
                            font-size: 12px;
                            opacity: 0.6;
                            text-transform: uppercase;
                        "
                    >
                        Expanded State
                    </span>
                </main>
            </div>
        </div>

<div
            style="
                display: flex;
                gap: 0;
                min-height: 300px;
                border-radius: 12px;
                overflow: hidden;
                border: 1px solid var(--color_line_secondary);
            "
        >
            <main style="flex: 1; padding: 24px; background: white">
                <h4 style="margin: 0 0 16px">Document Content</h4>
                <p style="margin: 0 0 12px; opacity: 0.8; line-height: 1.6">
                    This is the main content area. The right rail can be used
                    for contextual information, tools, or secondary navigation.
                </p>
                <p style="margin: 0; opacity: 0.8; line-height: 1.6">
                    Right rails are particularly useful for properties panels,
                    comments, or related content.
                </p>
            </main>
            <aside
                class="ss-c-rail ss-c-rail--right"
                style="
                    width: 280px;
                    background: var(--color_fill_secondary);
                    padding: 20px;
                    border-left: 1px solid var(--color_line_secondary);
                "
            >
                <h5
                    style="
                        margin: 0 0 16px;
                        font-size: 14px;
                        text-transform: uppercase;
                        opacity: 0.6;
                    "
                >
                    Properties
                </h5>
                <div style="display: flex; flex-direction: column; gap: 16px">
                    <div>
                        <label
                            style="
                                display: block;
                                font-size: 12px;
                                opacity: 0.7;
                                margin-bottom: 6px;
                            "
                        >
                            Status
                        </label>
                        <select
                            style="
                                width: 100%;
                                padding: 8px;
                                border: 1px solid var(--color_line_secondary);
                                border-radius: 6px;
                            "
                        >
                            <option>Draft</option>
                            <option>Published</option>
                        </select>
                    </div>
                    <div>
                        <label
                            style="
                                display: block;
                                font-size: 12px;
                                opacity: 0.7;
                                margin-bottom: 6px;
                            "
                        >
                            Author
                        </label>
                        <div
                            style="
                                display: flex;
                                align-items: center;
                                gap: 8px;
                            "
                        >
                            <div
                                style="
                                    width: 28px;
                                    height: 28px;
                                    background: var(--ss-color-accent); color: #ffffff;
                                    border-radius: 50%;
                                "
                            ></div>
                            <span style="font-size: 14px">Jane Doe</span>
                        </div>
                    </div>
                    <div>
                        <label
                            style="
                                display: block;
                                font-size: 12px;
                                opacity: 0.7;
                                margin-bottom: 6px;
                            "
                        >
                            Last Modified
                        </label>
                        <span style="font-size: 14px">Today at 2:34 PM</span>
                    </div>
                </div>
            </aside>
        </div>