*
{
    -webkit-tap-highlight-color : transparent;
    box-sizing : border-box;
    margin : 0;
    padding : 0;
}

::selection
{
    background : #d4a85a;
    color : #2c5f4a;
}

::-moz-selection
{
    background : #d4a85a;
    color : #2c5f4a;
}

:root
{
    --bg : #f5f1eb;
    --surface : #ffffff;
    --tint : #ede8e0;
    --text : #2c2416;
    --muted : #4a3f30;
    --border : #d5cbbc;
    --accent : #c9a84c;
    --accent-hover : #b8973d;
    --accent-text : #8a6a3e;
    --on-accent : #2c2416;
    --header-bg : #2c2416;
    --on-header : #f5f1eb;
    --danger : #b4161f;
    --success : #1a7f4b;
    --close : #d6336c;
    --work : #2c2416;
    --health : #1a7f4b;
    --home : #b84f08;
    --leisure : #a0328c;
    --travel : #b4823c;
    --bizwork : #c0392b;
    --biztravel : #0f766e;
    --car1 : #7d3c98;
    --car2 : #a61e4d;
    --misc : #6b5e4e;
    --misc2 : #856a00;
    --misc3 : #8b5a2b;
    --misc4 : #4f7700;
    --misc5 : #7d3c98;
    --radius : 6px;
}

@media (prefers-color-scheme : dark)
{
    :root
    {
        --bg : #2c2416;
        --surface : #4a3f30;
        --tint : #3a3022;
        --text : #f5f1eb;
        --muted : #d5cbbc;
        --border : #6b5e4e;
        --accent : #c9a84c;
        --accent-hover : #b8973d;
        --accent-text : #c9a84c;
        --on-accent : #2c2416;
        --header-bg : #2c2416;
        --on-header : #f5f1eb;
        --danger : #ff7b72;
        --success : #3fb97a;
        --close : #ff7aa8;
        --work : #d5cbbc;
        --health : #3fb97a;
        --home : #f0883e;
        --leisure : #e090d0;
        --travel : #e0b866;
        --bizwork : #ff8a80;
        --biztravel : #4fd1c5;
        --car1 : #d58cf0;
        --car2 : #f783ac;
        --misc : #b8a898;
        --misc2 : #e3b341;
        --misc3 : #d29b6b;
        --misc4 : #a3d34a;
        --misc5 : #d58cf0;
    }
}

html
{
    scroll-behavior : smooth;
}

body
{
    background : var(--bg);
    color : var(--text);
    font-family : system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height : 1.5;
}

body.no-scroll
{
    overflow : hidden;
}

button
{
    font : inherit;
    color : inherit;
    cursor : pointer;
    background : none;
    border : 0;
}

.site-header
{
    background : var(--header-bg);
    border-bottom : 1px solid rgba(255, 255, 255, 0.08);
    position : sticky;
    top : 0;
    z-index : 50;
}

.header-inner
{
    max-width : 1200px;
    margin : 0 auto;
    padding : 0 20px;
    height : 72px;
    display : flex;
    align-items : center;
    justify-content : space-between;
}

.logo
{
    width: 135px
}



.nav
{
    display : flex;
    align-items : center;
    gap : 6px;
}

.nav a, .dropdown-toggle
{
    display : inline-flex;
    align-items : center;
    gap : 6px;
    padding : 6px 14px;
    border-radius : 4px;
    color : rgba(245, 241, 235, 0.82);
    text-decoration : none;
    font-size : 0.88rem;
    font-weight : 500;
    letter-spacing : 0.01em;
    transition : background 0.18s ease, color 0.18s ease;
}

.nav a:hover, .dropdown-toggle:hover
{
    color : #f5f1eb;
    background : rgba(255, 255, 255, 0.08);
}

.dropdown
{
    position : relative;
}

.dropdown-toggle .chevron
{
    width : 8px;
    height : 8px;
    border-right : 2px solid currentColor;
    border-bottom : 2px solid currentColor;
    transform : rotate(45deg) translateY(-2px);
    transition : transform 0.25s ease;
}

.dropdown.open .chevron
{
    transform : rotate(225deg) translateY(-2px);
}

.dropdown-menu
{
    position : absolute;
    top : calc(100% + 6px);
    right : 0;
    min-width : 200px;
    background : var(--surface);
    border : 1px solid var(--border);
    border-radius : var(--radius);
    box-shadow : 0 16px 40px rgba(44, 36, 22, 0.15);
    padding : 6px;
    opacity : 0;
    visibility : hidden;
    transform : translateY(-8px);
    transition : opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.dropdown.open .dropdown-menu
{
    opacity : 1;
    visibility : visible;
    transform : translateY(0);
}

.dropdown-menu button, .dropdown-menu a
{
    display : flex;
    align-items : center;
    gap : 10px;
    width : 100%;
    text-align : left;
    padding : 9px 12px;
    border-radius : 8px;
    font-size : 0.9rem;
    color : var(--text);
    transition : background 0.15s ease, color 0.15s ease;
}

.dropdown-menu button:hover, .dropdown-menu button.active, .dropdown-menu a:hover
{
    background : var(--bg);
    color : var(--text);
}

.swatch
{
    width : 10px;
    height : 10px;
    border-radius : 50%;
    flex-shrink : 0;
    background : var(--muted);
}

.swatch.close, .chip.close, .dot.close
{
    background : var(--close);
}

.swatch.work, .chip.work, .dot.work
{
    background : var(--work);
}

.swatch.health, .chip.health, .dot.health
{
    background : var(--health);
}

.swatch.home, .chip.home, .dot.home
{
    background : var(--home);
}

.swatch.leisure, .chip.leisure, .dot.leisure
{
    background : var(--leisure);
}

.swatch.travel, .chip.travel, .dot.travel
{
    background : var(--travel);
}

.swatch.misc, .chip.misc, .dot.misc
{
    background : var(--misc);
}

.swatch.misc2, .chip.misc2, .dot.misc2
{
    background : var(--misc2);
}

.swatch.misc3, .chip.misc3, .dot.misc3
{
    background : var(--misc3);
}

.swatch.misc4, .chip.misc4, .dot.misc4
{
    background : var(--misc4);
}

.swatch.bizwork, .chip.bizwork, .dot.bizwork
{
    background : var(--bizwork);
}

.swatch.biztravel, .chip.biztravel, .dot.biztravel
{
    background : var(--biztravel);
}

.swatch.car1, .chip.car1, .dot.car1
{
    background : var(--car1);
}

.swatch.car2, .chip.car2, .dot.car2
{
    background : var(--car2);
}

.swatch.misc5, .chip.misc5, .dot.misc5
{
    background : var(--misc5);
}

.hamburger
{
    display : none;
    width : 42px;
    height : 42px;
    position : relative;
    background : rgba(255, 255, 255, 0.08);
    border : 1px solid rgba(255, 255, 255, 0.14);
    border-radius : 4px;
    z-index : 60;
}

.hamburger span
{
    position : absolute;
    left : 9px;
    width : 22px;
    height : 2px;
    background : #f5f1eb;
    border-radius : 2px;
    transition : transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

.hamburger span:nth-child(1)
{
    top : 13px;
}

.hamburger span:nth-child(2)
{
    top : 19px;
}

.hamburger span:nth-child(3)
{
    top : 25px;
}

.hamburger.open span:nth-child(1)
{
    top : 19px;
    transform : rotate(45deg);
}

.hamburger.open span:nth-child(2)
{
    opacity : 0;
}

.hamburger.open span:nth-child(3)
{
    top : 19px;
    transform : rotate(-45deg);
}

.page
{
    max-width : 1200px;
    margin : 0 auto;
    padding : 28px 20px 60px;
}

.page-title
{
    font-size : 1.8rem;
    letter-spacing : -0.02em;
    margin-bottom : 4px;
}

.page-sub
{
    color : var(--muted);
    margin-bottom : 24px;
}

.layout
{
    display : grid;
    grid-template-columns : minmax(0, 1fr) 340px;
    gap : 24px;
    align-items : start;
}

.card
{
    background : var(--surface);
    border : 1px solid var(--border);
    border-radius : 6px;
}

.cal-toolbar
{
    display : flex;
    align-items : center;
    justify-content : space-between;
    gap : 12px;
    padding : 16px 20px;
    border-bottom : 1px solid var(--border);
}

.cal-title
{
    font-size : 1.25rem;
    font-weight : 600;
}

.cal-controls
{
    display : flex;
    gap : 6px;
}

.btn
{
    padding : 8px 16px;
    border : 1px solid var(--border);
    border-radius : 4px;
    background : var(--surface);
    font-size : 0.875rem;
    font-weight : 700;
    letter-spacing : 0.04em;
    transition : background 0.2s ease, transform 0.15s ease;
}

.btn:hover
{
    background : var(--bg);
}

.btn:active
{
    transform : scale(0.97);
}

.btn.primary
{
    background : var(--accent);
    border-color : var(--accent);
    color : var(--on-accent);
}

.btn.primary:hover
{
    background : var(--accent-hover);
    border-color : var(--accent-hover);
}

.weekdays, .grid
{
    display : grid;
    grid-template-columns : repeat(7, minmax(0, 1fr));
}

.weekdays div
{
    padding : 10px 8px;
    text-align : center;
    font-size : 0.78rem;
    font-weight : 600;
    text-transform : uppercase;
    letter-spacing : 0.05em;
    color : var(--muted);
    border-bottom : 1px solid var(--border);
}

.day
{
    min-height : 112px;
    padding : 8px;
    border-right : 1px solid var(--border);
    border-bottom : 1px solid var(--border);
    text-align : left;
    display : flex;
    flex-direction : column;
    gap : 4px;
    transition : background 0.2s ease;
}

.day:nth-child(7n)
{
    border-right : 0;
}

.day:hover
{
    background : var(--bg);
}

.day.other .num
{
    color : var(--muted);
}

.day.selected
{
    background : rgba(201, 168, 76, 0.2);
    box-shadow : inset 0 0 0 2px var(--accent);
}

.num
{
    font-size : 0.85rem;
    font-weight : 500;
    width : 26px;
    height : 26px;
    display : inline-flex;
    align-items : center;
    justify-content : center;
    border-radius : 50%;
}

.day.today .num
{
    background : var(--accent);
    color : var(--on-accent);
}

.chip
{
    display : block;
    width : 100%;
    min-height : 24px;
    line-height : 20px;
    padding : 2px 6px;
    border-radius : 5px;
    font-size : 0.74rem;
    color : #ffffff;
    text-align : left;
    white-space : nowrap;
    overflow : hidden;
    text-overflow : ellipsis;
    transition : filter 0.2s ease;
}

.chip:hover
{
    filter : brightness(1.12);
}

.chip.extra
{
    display : none;
}

.more
{
    font-size : 0.72rem;
    color : var(--muted);
    padding : 0 6px;
}

.dots
{
    display : none;
    gap : 3px;
    flex-wrap : wrap;
}

.dot
{
    width : 7px;
    height : 7px;
    border-radius : 50%;
}

.side
{
    display : flex;
    flex-direction : column;
    gap : 24px;
    position : sticky;
    top : 88px;
}

.panel-head
{
    padding : 16px 20px;
    border-bottom : 1px solid var(--border);
    display : flex;
    align-items : center;
    justify-content : space-between;
}

.panel-head h2
{
    font-size : 1rem;
}

.panel-body
{
    padding : 8px;
    max-height : 460px;
    overflow-y : auto;
}

.event-row
{
    display : flex;
    gap : 14px;
    width : 100%;
    text-align : left;
    padding : 12px;
    border-radius : 10px;
    transition : background 0.2s ease;
}

.event-row:hover
{
    background : var(--bg);
}

.date-badge
{
    width : 52px;
    flex-shrink : 0;
    text-align : center;
    border : 1px solid var(--border);
    border-radius : 6px;
    padding : 6px 0;
    background : var(--surface);
}

.date-badge b
{
    display : block;
    font-size : 1.2rem;
    line-height : 1.1;
}

.date-badge small
{
    font-size : 0.7rem;
    text-transform : uppercase;
    letter-spacing : 0.06em;
    color : var(--muted);
}

.event-info h3
{
    font-size : 0.95rem;
    font-weight : 600;
}

.event-info p
{
    font-size : 0.82rem;
    color : var(--muted);
}

.empty
{
    padding : 28px 16px;
    text-align : center;
    color : var(--muted);
    font-size : 0.9rem;
}

.overlay
{
    position : fixed;
    inset : 0;
    background : rgba(44, 36, 22, 0.6);
    display : flex;
    align-items : center;
    justify-content : center;
    padding : 20px;
    z-index : 100;
    opacity : 0;
    visibility : hidden;
    transition : opacity 0.3s ease, visibility 0.3s;
}

.overlay.open
{
    opacity : 1;
    visibility : visible;
}

.modal
{
    width : 100%;
    max-width : 480px;
    background : var(--surface);
    border-radius : 8px;
    overflow : hidden;
    transform : translateY(20px) scale(0.97);
    transition : transform 0.3s ease;
}

.overlay.open .modal
{
    transform : translateY(0) scale(1);
}

.modal-top
{
    height : 8px;
    background : var(--accent);
}

.modal-top.close
{
    background : var(--close);
}

.modal-top.work
{
    background : var(--work);
}

.modal-top.health
{
    background : var(--health);
}

.modal-top.home
{
    background : var(--home);
}

.modal-top.leisure
{
    background : var(--leisure);
}

.modal-top.travel
{
    background : var(--travel);
}

.modal-top.misc
{
    background : var(--misc);
}

.modal-top.misc2
{
    background : var(--misc2);
}

.modal-top.misc3
{
    background : var(--misc3);
}

.modal-top.misc4
{
    background : var(--misc4);
}

.modal-top.bizwork
{
    background : var(--bizwork);
}

.modal-top.biztravel
{
    background : var(--biztravel);
}

.modal-top.car1
{
    background : var(--car1);
}

.modal-top.car2
{
    background : var(--car2);
}

.modal-top.misc5
{
    background : var(--misc5);
}

.modal-body
{
    padding : 24px;
}

.modal-body h2
{
    font-size : 1.4rem;
    margin-bottom : 4px;
    letter-spacing : -0.01em;
}

.modal-cat
{
    font-size : 0.8rem;
    text-transform : uppercase;
    letter-spacing : 0.07em;
    color : var(--muted);
    margin-bottom : 16px;
}

.meta
{
    display : grid;
    gap : 8px;
    margin-bottom : 16px;
    font-size : 0.93rem;
}

.meta div
{
    display : flex;
    gap : 10px;
}

.meta dt
{
    width : 78px;
    color : var(--muted);
    flex-shrink : 0;
}

.modal-desc
{
    color : var(--muted);
    margin-bottom : 22px;
}

.modal-actions
{
    display : flex;
    gap : 10px;
    justify-content : flex-end;
}

.tabs
{
    display : flex;
    gap : 6px;
    padding : 12px 16px 0;
}

.tabs[hidden]
{
    display : none;
}

.tab
{
    padding : 7px 14px;
    border : 1px solid var(--border);
    border-radius : 999px;
    background : var(--surface);
    font-size : 0.85rem;
    color : var(--muted);
    transition : background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tab:hover
{
    background : var(--bg);
    color : var(--text);
}

.tab.active
{
    background : var(--accent);
    border-color : var(--accent);
    color : var(--on-accent);
}

.show-more
{
    display : block;
    margin : 8px auto 4px;
}

.sound-bar
{
    display : flex;
    flex-wrap : wrap;
    align-items : center;
    gap : 10px 16px;
    padding : 14px 20px;
    border-top : 1px solid var(--border);
}

.switch
{
    position : relative;
    display : inline-flex;
    align-items : center;
    gap : 10px;
    cursor : pointer;
    font-size : 0.9rem;
    font-weight : 600;
}

.switch input
{
    position : absolute;
    opacity : 0;
    width : 0;
    height : 0;
}

.switch-track
{
    position : relative;
    width : 42px;
    height : 24px;
    flex-shrink : 0;
    border-radius : 999px;
    background : var(--border);
    transition : background 0.25s ease, box-shadow 0.25s ease;
}

.switch-track::after
{
    content : "";
    position : absolute;
    top : 3px;
    left : 3px;
    width : 18px;
    height : 18px;
    border-radius : 50%;
    background : #ffffff;
    box-shadow : 0 1px 3px rgba(0, 0, 0, 0.3);
    transition : transform 0.25s ease;
}

.switch input:checked + .switch-track
{
    background : var(--accent);
}

.switch input:checked + .switch-track::after
{
    transform : translateX(18px);
}

.switch input:focus-visible + .switch-track
{
    box-shadow : 0 0 0 3px rgba(201, 168, 76, 0.45);
}

.sound-options
{
    display : flex;
    flex-wrap : wrap;
    align-items : center;
    gap : 8px;
    font-size : 0.85rem;
    color : var(--muted);
    transition : opacity 0.25s ease;
}

.sound-leads
{
    display : flex;
    flex-wrap : wrap;
    gap : 4px 12px;
}

.sound-leads label
{
    display : inline-flex;
    align-items : center;
    gap : 5px;
    color : var(--text);
    cursor : pointer;
}

.sound-leads input
{
    accent-color : var(--accent);
}

.search-wrap
{
    position : relative;
    padding : 14px 16px 0;
}

.search-icon
{
    position : absolute;
    left : 30px;
    top : 50%;
    margin-top : 7px;
    transform : translateY(-50%);
    color : var(--muted);
    pointer-events : none;
    transition : color 0.2s ease;
}

.search-box
{
    -webkit-appearance : none;
    appearance : none;
    width : 100%;
    padding : 11px 16px 11px 42px;
    font : inherit;
    font-size : 0.92rem;
    color : var(--text);
    background : var(--bg);
    border : 1px solid var(--border);
    border-radius : 999px;
    transition : border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.search-box::placeholder
{
    color : var(--muted);
    opacity : 0.8;
}

.search-box:hover
{
    border-color : var(--muted);
}

.search-box:focus
{
    outline : none;
    background : var(--surface);
    border-color : var(--accent);
    box-shadow : 0 0 0 3px rgba(201, 168, 76, 0.35);
}

.search-wrap:focus-within .search-icon
{
    color : var(--accent);
}

.search-box::-webkit-search-cancel-button
{
    cursor : pointer;
}

.print-btn
{
    display : inline-flex;
    align-items : center;
    gap : 6px;
}

.modal-repeat
{
    font-size : 0.85rem;
    color : var(--muted);
    margin : -8px 0 16px;
}

.toast-wrap
{
    position : fixed;
    right : 16px;
    bottom : 16px;
    display : flex;
    flex-direction : column;
    gap : 10px;
    max-width : calc(100vw - 32px);
    z-index : 200;
}

.toast
{
    display : flex;
    align-items : flex-start;
    gap : 12px;
    max-width : 360px;
    padding : 14px 16px;
    background : var(--surface);
    color : var(--text);
    border : 1px solid var(--border);
    border-left : 4px solid var(--accent);
    border-radius : var(--radius);
    box-shadow : 0 8px 24px rgba(0, 0, 0, 0.18);
    font-size : 0.92rem;
    opacity : 0;
    transform : translateY(12px);
    transition : opacity 0.3s ease, transform 0.3s ease;
}

.toast.show
{
    opacity : 1;
    transform : translateY(0);
}

.toast-text
{
    flex : 1;
}

.toast-close
{
    font-size : 1.2rem;
    line-height : 1;
    color : var(--muted);
}

body .footer-links
{
    background : var(--header-bg);
    border-top : 1px solid rgba(255, 255, 255, 0.1);
}

body .footer-links a
{
    color : rgba(245, 241, 235, 0.65);
    background-image : linear-gradient(#c9a84c, #c9a84c);
    font-size : 0.875rem;
    transition : background-size 0.4s ease-in-out, color 0.15s ease;
}

body .footer-links a:hover, body .footer-links a:focus
{
    color : #f5f1eb;
}

@media (max-width : 960px)
{
    .layout
    {
        grid-template-columns : minmax(0, 1fr);
    }

    .side
    {
        position : static;
    }
}

@media (max-width : 760px)
{
    .hamburger
    {
        display : block;
    }

    .nav
    {
        position : fixed;
        top : 72px;
        left : 0;
        right : 0;
        bottom : 0;
        background : var(--header-bg);
        flex-direction : column;
        align-items : stretch;
        gap : 4px;
        padding : 16px;
        overflow-y : auto;
        transform : translateX(100%);
        visibility : hidden;
        transition : transform 0.35s ease, visibility 0.35s;
    }

    .nav.open
    {
        transform : translateX(0);
        visibility : visible;
    }

    .nav a, .dropdown-toggle
    {
        width : 100%;
        justify-content : space-between;
        padding : 14px;
        font-size : 1.05rem;
    }

    .dropdown-menu
    {
        position : static;
        min-width : 0;
        border : 0;
        box-shadow : none;
        background : rgba(255, 255, 255, 0.04);
        padding : 0 0 0 10px;
        opacity : 1;
        visibility : visible;
        transform : none;
        max-height : 0;
        overflow : hidden;
        transition : max-height 0.35s ease;
    }

    .dropdown.open .dropdown-menu
    {
        max-height : 600px;
    }

    .dropdown-menu a, .dropdown-menu button
    {
        color : rgba(245, 241, 235, 0.65);
    }

    .dropdown-menu a:hover, .dropdown-menu button:hover, .dropdown-menu button.active
    {
        background : rgba(255, 255, 255, 0.05);
        color : #f5f1eb;
    }

    .day
    {
        min-height : 64px;
        padding : 4px;
        align-items : center;
    }

    .chip, .more
    {
        display : none;
    }

    .dots
    {
        display : flex;
        justify-content : center;
    }

    .cal-toolbar
    {
        padding : 12px;
    }

    .cal-title
    {
        font-size : 1.05rem;
    }
}

@media (prefers-color-scheme : dark)
{
    .chip
    {
        color : #2c2416;
    }

    .search-wrap:focus-within .search-icon
    {
        color : #c9a84c;
    }
}

@media print
{
    body > *:not(main)
    {
        display : none !important;
    }

    body
    {
        background : #ffffff;
    }

    .side, .cal-controls, .page-sub
    {
        display : none !important;
    }

    .layout
    {
        display : block;
    }

    .card, .day, .weekdays div
    {
        box-shadow : none;
        border-color : #999999;
        background : #ffffff !important;
        color : #000000 !important;
    }

    .num, .cal-title
    {
        color : #000000 !important;
    }

    .chip, .chip.extra
    {
        display : block !important;
        color : #000000;
        background : #ffffff !important;
        border : 1px solid #666666;
        margin-bottom : 2px;
        white-space : normal;
        overflow : visible;
        -webkit-print-color-adjust : exact;
        print-color-adjust : exact;
    }

    .more
    {
        display : none !important;
    }

    .dots
    {
        display : none !important;
    }

    .day
    {
        min-height : 90px;
        break-inside : avoid;
    }
}

.guide
{
    padding : 28px;
    max-width : 860px;
}

.guide section, .guide-contents
{
    margin-bottom : 28px;
}

.guide h2
{
    font-size : 1.25rem;
    margin-bottom : 10px;
}

.guide h3
{
    font-size : 1.05rem;
    margin : 16px 0 6px;
}

.guide p, .guide li
{
    line-height : 1.65;
}

.guide p
{
    margin-bottom : 10px;
}

.guide ul, .guide ol
{
    margin : 0 0 10px 22px;
}

.guide li
{
    margin-bottom : 6px;
}

.guide a
{
    color : var(--accent-text);
    font-weight : 600;
    text-decoration : none;
    background-image : linear-gradient(currentColor, currentColor);
    background-size : 100% 1px;
    background-position : 0 100%;
    background-repeat : no-repeat;
    padding-bottom : 1px;
    transition : background-size 0.3s ease, color 0.2s ease;
}

.guide a:hover, .guide a:focus-visible
{
    background-size : 100% 3px;
}

.guide a:focus-visible
{
    outline : 2px solid var(--accent-text);
    outline-offset : 3px;
    border-radius : 3px;
}

.guide-contents
{
    background : var(--bg);
    border : 1px solid var(--border);
    border-radius : var(--radius);
    padding : 20px 22px;
}

.guide-contents ol
{
    list-style : none;
    counter-reset : guide;
    margin : 0;
    columns : 2;
    column-gap : 24px;
}

.guide-contents li
{
    counter-increment : guide;
    break-inside : avoid;
    margin-bottom : 4px;
}

.guide-contents a
{
    display : flex;
    align-items : center;
    gap : 12px;
    padding : 9px 12px;
    border-radius : 8px;
    color : var(--text);
    font-weight : 500;
    background-image : none;
    transition : background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.guide-contents a::before
{
    content : counter(guide);
    flex : 0 0 26px;
    width : 26px;
    height : 26px;
    display : grid;
    place-items : center;
    border-radius : 50%;
    background : var(--accent);
    color : var(--on-accent);
    font-size : 0.8rem;
    font-weight : 700;
    transition : transform 0.2s ease;
}

.guide-contents a:hover, .guide-contents a:focus-visible
{
    background : var(--surface);
    color : var(--accent-text);
    transform : translateX(4px);
}

.guide-contents a:hover::before, .guide-contents a:focus-visible::before
{
    transform : scale(1.1);
}

@media (prefers-color-scheme : dark)
{
    .guide a { color : var(--accent-text); }
    .guide-contents a { color : var(--text); }
    .guide-contents a:hover, .guide-contents a:focus-visible { color : var(--accent-text); }
}

@media (max-width : 640px)
{
    .guide { padding : 20px 16px; }
    .guide-contents ol { columns : 1; }
}