*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    min-height: 100vh;
    font-family: "Noto Serif TC", serif;
    color: #e8dfc8;
    overflow-x: hidden;
    background-image: url("https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/2868840/header.jpg");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(to bottom,  rgba(0,0,0,.92) 0%, transparent 28%),
        linear-gradient(to top,     rgba(0,0,0,.92) 0%, transparent 28%),
        linear-gradient(to right,   rgba(0,0,0,.88) 0%, transparent 22%),
        linear-gradient(to left,    rgba(0,0,0,.88) 0%, transparent 22%),
        rgba(0,0,0,.38);
    pointer-events: none;
    z-index: 0;
}


body {
    display: flex;
    align-items: stretch;
}


.sidebar {
    position: relative;
    z-index: 10;
    width: 360px;
    min-width: 320px;
    max-width: 400px;
    flex-shrink: 0;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    background: rgba(10, 7, 4, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid rgba(200,168,74,.2);
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
    overflow: hidden;
}


.layout-main {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
    overflow-y: auto;
}


.sidebar-collapse-btn {
    all: unset;
    cursor: pointer;
    margin-left: 8px;
    width: 22px; height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a6e56;
    font-size: .75rem;
    transition: color .2s, background .2s;
    flex-shrink: 0;
}
.sidebar-collapse-btn:hover { color: #c8a84a; background: rgba(200,168,74,.1); }


.sidebar {
    transition: width .3s cubic-bezier(.22,1,.36,1), min-width .3s;
}
.sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    border-right: none;
    overflow: hidden;
}


.sidebar-expand-btn {
    position: fixed;
    top: 14px; left: 14px;
    z-index: 50;
    all: unset;
    cursor: pointer;
    width: 32px; height: 32px;
    background: rgba(12,9,5,.88);
    border: 1px solid rgba(200,168,74,.35);
    border-radius: 6px;
    color: #c8a84a;
    font-size: .8rem;
    display: none; 
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    transition: background .2s;
}
.sidebar-expand-btn:hover { background: rgba(200,168,74,.15); }


.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 12px;
    border-bottom: 1px solid rgba(200,168,74,.18);
    font-family: "Cinzel", serif;
    font-size: .88rem;
    color: #c8a84a;
    letter-spacing: .06em;
    flex-shrink: 0;
}
.sidebar-close {
    all: unset;
    cursor: pointer;
    color: #5a5040;
    font-size: .9rem;
    padding: 4px 7px;
    border-radius: 4px;
    display: none; 
    transition: color .2s, background .2s;
}
.sidebar-close:hover { color: #c8a84a; background: rgba(200,168,74,.1); }


.sidebar-tabs {
    display: flex;
    border-bottom: 1px solid rgba(200,168,74,.15);
    flex-shrink: 0;
}
.stab {
    all: unset;
    flex: 1;
    text-align: center;
    padding: 9px 4px;
    font-size: .72rem;
    color: #6a5e44;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s, background .2s;
    font-family: "Noto Serif TC", serif;
    line-height: 1.3;
}
.stab:hover { color: #c8a84a; background: rgba(200,168,74,.05); }
.stab.active { color: #f0d898; border-bottom-color: #c8a84a; }


.sidebar-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(200,168,74,.25) transparent;
}
.sidebar-body::-webkit-scrollbar { width: 4px; }
.sidebar-body::-webkit-scrollbar-thumb { background: rgba(200,168,74,.25); border-radius: 99px; }
.sidebar-loading { padding: 24px 18px; font-size: .82rem; color: #6a5e44; }


.guide-panel { display: none; padding: 18px 18px 32px; }
.guide-panel.active { display: block; }


.g-section { margin-bottom: 22px; }
.g-section-title {
    font-family: "Cinzel", serif;
    font-size: .75rem;
    color: #c8a84a;
    letter-spacing: .06em;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(200,168,74,.18);
}
.g-steps {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.g-steps li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .8rem;
    color: #b0a07a;
    line-height: 1.65;
}

.g-num {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(200,168,74,.13);
    border: 1px solid rgba(200,168,74,.28);
    color: #c8a84a;
    font-size: .65rem;
    font-family: "Cinzel", serif;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
}

.g-steps li > span:not(.g-num) {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.g-steps li strong { color: #ddd0a8; }
.g-steps li code {
    display: inline;
    background: rgba(0,0,0,.35);
    color: #f0d080;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: "Courier New", monospace;
    font-size: .8em;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}
.g-note {
    font-size: .74rem;
    color: #7a6e52;
    background: rgba(200,168,74,.06);
    border-left: 2px solid rgba(200,168,74,.28);
    padding: 8px 10px;
    border-radius: 0 5px 5px 0;
    margin-top: 8px;
    line-height: 1.65;
}
.g-note code {
    background: rgba(0,0,0,.3);
    color: #f0d080;
    padding: 1px 4px;
    border-radius: 3px;
    font-family: "Courier New", monospace;
    font-size: .85em;
    word-break: break-all;
}
.g-warn {
    font-size: .74rem;
    color: #d09050;
    background: rgba(180,90,20,.1);
    border-left: 2px solid rgba(200,120,40,.45);
    padding: 8px 10px;
    border-radius: 0 5px 5px 0;
    margin-top: 8px;
    line-height: 1.65;
}
.g-path {
    font-family: "Courier New", monospace;
    font-size: .7rem;
    color: #f0d080;
    background: rgba(0,0,0,.4);
    padding: 5px 9px;
    border-radius: 4px;
    margin: 6px 0 2px;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    display: block;
    
    grid-column: 2;
}
.g-divider {
    border: none;
    border-top: 1px solid rgba(200,168,74,.1);
    margin: 18px 0;
}


.hamburger {
    display: none; 
    position: fixed;
    top: 14px; left: 14px;
    z-index: 200;
    all: unset;
    cursor: pointer;
    width: 38px; height: 38px;
    background: rgba(12,9,5,.88);
    border: 1px solid rgba(200,168,74,.3);
    border-radius: 8px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    backdrop-filter: blur(8px);
    transition: background .2s, border-color .2s;
}
.hamburger span {
    display: block;
    width: 18px; height: 2px;
    background: #c8a84a;
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 150;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.open { display: block; }


.page-wrap {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 28px 60px;
}


.site-header { text-align: center; margin-bottom: 28px; }
.site-header h1 {
    font-family: "Cinzel", serif;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: .08em;
    color: #f5e6c0;
    text-shadow: 0 0 18px rgba(220,160,40,.7), 0 2px 6px rgba(0,0,0,.9);
    line-height: 1.2;
}
.ornament {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin: 12px 0 0;
    color: #c8a84a;
    font-size: .92rem;
    letter-spacing: .06em;
}
.ornament::before, .ornament::after {
    content: "";
    flex: 1;
    max-width: 100px;
    height: 1px;
    background: linear-gradient(to right, transparent, #c8a84a88, transparent);
}


.container {
    width: 100%;
    max-width: 660px;
    background: rgba(16, 12, 8, 0.72);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(200,168,74,.28);
    border-radius: 14px;
    padding: clamp(22px, 4vw, 36px) clamp(18px, 4vw, 36px);
    box-shadow: 0 8px 40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,220,120,.07);
}
.container > p {
    margin-bottom: 16px;
    color: #c4b494;
    font-size: .9rem;
    line-height: 1.7;
}
.container > p code {
    background: rgba(200,168,74,.15);
    color: #f0d080;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "Courier New", monospace;
    font-size: .86em;
    border: 1px solid rgba(200,168,74,.22);
}


.os-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(200,168,74,.08);
    border: 1px solid rgba(200,168,74,.22);
    border-radius: 8px;
    padding: 11px 14px;
    margin-bottom: 16px;
    transition: border-color .3s;
}
.os-hint--mac { border-color: rgba(255,160,80,.45); background: rgba(255,140,50,.09); }
.os-hint-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.os-hint-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .82rem;
    line-height: 1.5;
    flex: 1;
    min-width: 0;
}
.os-hint-text strong { color: #ddd0a8; font-weight: 600; }
.os-hint-text span {
    display: none;
    color: #f0d080;
    font-family: "Courier New", monospace;
    font-size: .78rem;
    background: rgba(0,0,0,.3);
    padding: 2px 7px;
    border-radius: 4px;
    word-break: break-all;
}


.upload-box {
    border: 2px dashed rgba(200,168,74,.45);
    padding: 36px 18px;
    text-align: center;
    border-radius: 10px;
    background: rgba(200,168,74,.05);
    cursor: pointer;
    transition: background .25s, border-color .25s;
}
.upload-box:hover { background: rgba(200,168,74,.12); border-color: rgba(200,168,74,.75); }
.upload-box strong { font-size: .95rem; color: #e8d8a8; }
#fileName { margin-top: 9px; font-size: .82rem; color: #9a8a68; }


#status {
    margin-top: 16px;
    padding: 11px 15px;
    border-left: 3px solid #c8a84a;
    background: rgba(200,168,74,.08);
    border-radius: 0 8px 8px 0;
    font-size: .82rem;
    white-space: pre-line;
    color: #d4c49a;
    line-height: 1.65;
}


.progress-wrap { display: none; align-items: center; gap: 12px; margin-top: 13px; }
.progress-bar-bg { flex: 1; height: 7px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; }
.progress-bar-fill {
    height: 100%; width: 0%;
    border-radius: 99px;
    background: linear-gradient(90deg, #b8882a, #e0aa48, #f5d070);
    transition: width .35s ease;
    position: relative;
}
.progress-bar-fill.progress-done { background: linear-gradient(90deg, #2a8a50, #48c878); }
.progress-bar-fill::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; width: 36px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.32));
    border-radius: 99px;
    animation: shimmer 1.2s infinite;
}
.progress-bar-fill.progress-done::after { display: none; }
@keyframes shimmer { 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} }
.progress-label { font-family:"Cinzel",serif; font-size:.78rem; color:#c8a84a; min-width:36px; text-align:right; }


button#startBtn {
    background: linear-gradient(135deg, #b8882a 0%, #e0aa48 50%, #b8882a 100%);
    color: #1a1006;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 700;
    font-family: "Cinzel", serif;
    letter-spacing: .06em;
    cursor: pointer;
    width: 100%;
    margin-top: 20px;
    transition: opacity .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 16px rgba(180,130,20,.32);
}
button#startBtn:not(:disabled):hover { opacity:.9; transform:translateY(-1px); box-shadow:0 6px 22px rgba(200,160,30,.5); }
button#startBtn:not(:disabled):active { transform:translateY(0); }
button#startBtn:disabled { background:rgba(80,70,50,.4); color:#6a604a; box-shadow:none; cursor:not-allowed; }


.script-option {
    display: block;
    margin-top: 16px;
    background: rgba(200,168,74,.07);
    border: 1px solid rgba(200,168,74,.22);
    border-radius: 8px;
    padding: 12px 16px;
}
.script-option-title {
    font-size: .78rem;
    color: #c8a84a;
    font-family: "Cinzel", serif;
    letter-spacing: .04em;
    margin-bottom: 10px;
}
.script-option-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.so-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: #b0a07a;
    cursor: pointer;
    white-space: nowrap;
}
.so-radio input[type="radio"] {
    accent-color: #c8a84a;
    cursor: pointer;
}


.script-preview {
    display: none;
    flex-direction: column;
    gap: 0;
    margin-top: 14px;
    border: 1px solid rgba(200,168,74,.2);
    border-radius: 7px;
    overflow: hidden;
}
.script-preview.open { display: flex; }

.script-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(200,168,74,.1);
    border-bottom: 1px solid rgba(200,168,74,.15);
}
.script-preview-name {
    font-family: "Courier New", monospace;
    font-size: .8rem;
    color: #e0c870;
}
.script-copy-btn {
    all: unset;
    cursor: pointer;
    font-size: .74rem;
    color: #c8a84a;
    border: 1px solid rgba(200,168,74,.35);
    padding: 3px 10px;
    border-radius: 4px;
    font-family: "Noto Serif TC", serif;
    transition: background .2s;
}
.script-copy-btn:hover { background: rgba(200,168,74,.18); }


.script-usage {
    padding: 10px 14px;
    background: rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(200,168,74,.1);
}
.su-title {
    font-size: .72rem;
    font-family: "Cinzel", serif;
    color: #c8a84a;
    letter-spacing: .05em;
    margin-bottom: 7px;
}
.su-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: .78rem;
    color: #a09070;
    line-height: 1.7;
}
.su-num {
    flex-shrink: 0;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(200,168,74,.12);
    border: 1px solid rgba(200,168,74,.25);
    color: #c8a84a;
    font-size: .6rem;
    font-family: "Cinzel", serif;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}


.script-code {
    margin: 0;
    padding: 12px 14px;
    background: rgba(0,0,0,.35);
    font-family: "Courier New", monospace;
    font-size: .72rem;
    color: #c8d8a0;
    line-height: 1.7;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(200,168,74,.2) transparent;
}

.g-env-block {
    margin: 8px 0;
    padding: 8px 10px;
    background: rgba(0,0,0,.25);
    border-left: 2px solid rgba(200,168,74,.22);
    border-radius: 0 5px 5px 0;
}
.g-env-label {
    font-size: .7rem;
    color: #c8a84a;
    font-family: "Cinzel", serif;
    letter-spacing: .03em;
    margin-bottom: 4px;
}
.g-env-block .g-path {
    margin: 0;
    font-size: .68rem;
}

/* macOS .app  */
.mac-app-picker {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: .8rem;
    color: #6a6050;
}
.mac-app-picker span { flex-shrink: 0; }
.mac-app-picker button {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: rgba(255,140,50,.1);
    border: 1px solid rgba(255,160,80,.35);
    border-radius: 7px;
    color: #d09060;
    font-size: .82rem;
    font-family: "Noto Serif TC", serif;
    transition: background .2s, border-color .2s;
}
.mac-app-picker button:hover {
    background: rgba(255,140,50,.2);
    border-color: rgba(255,160,80,.6);
}

/* macOS tip */
.mac-upload-note {
    display: none;
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(255,140,50,.09);
    border: 1px solid rgba(255,160,80,.35);
    border-radius: 8px;
    font-size: .8rem;
    color: #d09060;
    line-height: 1.65;
}
.mac-upload-note i { flex-shrink:0; margin-top:2px; font-size:1rem; }
.mac-upload-note code {
    background: rgba(0,0,0,.3);
    color: #f0d080;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: "Courier New", monospace;
    font-size: .85em;
}

/* changelog */
.changelog-wrap { width:100%; max-width:660px; margin-top:16px; }
.changelog-toggle {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    padding: 9px 16px;
    background: rgba(14,10,6,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(200,168,74,.18);
    border-radius: 10px;
    color: #9a8a68;
    font-size: .8rem;
    font-family: "Noto Serif TC", serif;
    transition: background .2s, border-color .2s, color .2s;
    box-sizing: border-box;
}
.changelog-toggle:hover { background:rgba(200,168,74,.09); border-color:rgba(200,168,74,.38); color:#d4c49a; }
.changelog-arrow { font-size:.68rem; color:#c8a84a; }
.changelog-panel { max-height:0; overflow:hidden; transition:max-height .4s ease, opacity .3s; opacity:0; }
.changelog-panel.open { max-height:600px; opacity:1; }
.changelog-entry { padding:12px 16px 9px; border-left:2px solid rgba(200,168,74,.18); margin:8px 4px 0; background:rgba(14,10,6,.45); border-radius:0 8px 8px 0; }
.changelog-entry:first-child { margin-top:7px; }
.changelog-ver { font-family:"Cinzel",serif; font-size:.82rem; color:#c8a84a; margin-bottom:6px; display:flex; align-items:center; gap:10px; }
.changelog-date { font-family:"Noto Serif TC",serif; font-size:.72rem; color:#6a6050; font-weight:400; }
.changelog-entry ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:3px; }
.changelog-entry ul li { font-size:.78rem; color:#9a8a68; padding-left:13px; position:relative; line-height:1.55; }
.changelog-entry ul li::before { content:"·"; position:absolute; left:4px; color:#c8a84a; }

.footer { margin-top:24px; font-size:.75rem; color:#6a6050; text-align:center; line-height:2; }
.footer a { color:#9a8070; text-decoration:none; }
.footer a:hover { color:#c8a84a; }

@media (max-width: 800px) {
    body { display: block; }          
    body::before { background-attachment: scroll; }

    .sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: min(300px, 85vw);
        max-width: none;
        z-index: 160;
        transform: translateX(-100%);
        transition: transform .32s cubic-bezier(.22,1,.36,1);
        border-right: 1px solid rgba(200,168,74,.25);
    }
    .sidebar.mobile-open { transform: translateX(0); }
    .sidebar-close { display: flex; }   
    .layout-main { display: block; }

    .hamburger { display: flex; }

    body { background-attachment: scroll; }
    .page-wrap { padding: 60px 16px 48px; }
    .container { border-radius: 10px; }
    .upload-box { padding: 26px 12px; }
}