Spaces:
Running
Running
| :root{--bg:#0b1613;--ink:#fff7e8;--mut:#cdbfae;--gold:#f3d38b;--rose:#ecaaa0;--em:#1f5c4a;--line:rgba(243,211,139,.28);--card:rgba(18,34,30,.72)} | |
| *{box-sizing:border-box} | |
| html{background:var(--bg)} | |
| body{margin:0;color:var(--ink);font:16px/1.7 "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; | |
| background:radial-gradient(1200px 700px at 15% -10%,rgba(40,128,98,.35),transparent 60%),radial-gradient(900px 600px at 100% 10%,rgba(200,110,140,.25),transparent 60%),linear-gradient(#0b1613,#120d12 70%);min-height:100vh} | |
| a{color:var(--gold)} | |
| button{font:inherit;color:inherit;cursor:pointer} | |
| .hero{max-width:1180px;margin:0 auto;padding:28px 22px 8px;text-align:center} | |
| .home{position:absolute;left:18px;top:14px;font-size:14px;text-decoration:none;opacity:.8} | |
| .eyebrow{font:700 14px/1 "Cormorant Garamond",serif;letter-spacing:.32em;color:var(--rose);margin:22px 0 6px} | |
| h1{font:900 clamp(38px,6vw,68px)/1.15 "Noto Serif SC",serif;margin:0;background:linear-gradient(100deg,#fff4d2,#f5d58a 25%,#c99a45 45%,#fbe3a6 60%,#b9873a 80%,#f1cf86);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.06em} | |
| h1 small{display:block;font-size:.38em;letter-spacing:.3em;margin-top:6px} | |
| h1 .sig{font-family:serif} | |
| .lead{color:var(--mut);max-width:780px;margin:14px auto 0} | |
| .lead b{color:var(--gold)} | |
| main{max-width:1180px;margin:0 auto;padding:12px 16px 40px} | |
| .player{margin-top:18px} | |
| .stage-wrap{position:relative;margin:0 auto;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px var(--line);background:#000;aspect-ratio:16/9;max-height:78vh} | |
| .stage-wrap.portrait{aspect-ratio:9/16;height:min(78vh,1100px);max-width:100%} | |
| #stage{display:block;width:100%;height:100%} | |
| .big-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle,rgba(0,0,0,.15),rgba(0,0,0,.5));border:0} | |
| .big-play span{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-size:34px;padding-left:6px;background:rgba(12,40,32,.7);box-shadow:0 0 0 2px var(--gold),0 0 40px rgba(243,211,139,.45)} | |
| .big-play em{font-style:normal;color:var(--gold);letter-spacing:.2em;font-size:15px} | |
| .big-play[hidden]{display:none} | |
| .loading{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:13px;color:var(--mut);background:rgba(0,0,0,.5);padding:4px 12px;border-radius:99px} | |
| .loading[hidden]{display:none} | |
| .controls{display:flex;align-items:center;gap:10px;margin:12px auto 0;max-width:100%;flex-wrap:wrap} | |
| .ic{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card)} | |
| .ic.on{color:var(--gold);border-color:var(--gold)} | |
| .time{font:600 14px "Noto Sans SC";color:var(--mut);min-width:96px;font-variant-numeric:tabular-nums} | |
| .bar{position:relative;flex:1;min-width:160px;height:10px;border-radius:9px;background:rgba(255,255,255,.1);cursor:pointer;touch-action:none} | |
| .bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:9px;background:linear-gradient(90deg,#c98774,#f5d58a)} | |
| .marks i{position:absolute;top:-3px;width:2px;height:16px;background:rgba(255,247,232,.45)} | |
| .seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)} | |
| .seg button{border:0;background:none;padding:8px 14px;font-size:14px;color:var(--mut)} | |
| .seg button.on{background:linear-gradient(120deg,#f5d58a,#c99a45);color:#1d1406;font-weight:700} | |
| .chapters{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:0;margin:14px 0 0} | |
| .chapters li{border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:13px;color:var(--mut);cursor:pointer;background:var(--card);transition:.2s} | |
| .chapters li b{display:block;color:var(--gold);font:700 12px "Cormorant Garamond",serif;letter-spacing:.15em} | |
| .chapters li.on{border-color:var(--gold);color:var(--ink);box-shadow:0 0 18px rgba(243,211,139,.2)} | |
| .panel{margin-top:34px;padding:26px;border-radius:22px;background:linear-gradient(160deg,rgba(24,52,44,.75),rgba(30,16,26,.75));box-shadow:0 0 0 1px var(--line),0 20px 60px rgba(0,0,0,.35)} | |
| .panel-head h2{margin:0;font:900 28px "Noto Serif SC",serif;color:var(--gold);letter-spacing:.08em} | |
| .panel-head p{margin:4px 0 18px;color:var(--mut);font-size:14px} | |
| .card-grid{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:28px;align-items:center} | |
| #cardView{width:100%;height:auto;border-radius:16px;background:#0b0a0e} | |
| .card-form label{display:block;margin-bottom:14px;color:var(--mut);font-size:14px} | |
| .card-form input,.card-form select{display:block;width:100%;margin-top:6px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--ink);font:inherit;font-size:17px} | |
| .card-form .row{display:flex;gap:10px}.card-form .row select{flex:1} | |
| .hint{font-size:13px;color:var(--rose);margin:-4px 0 14px} | |
| .btns{display:flex;gap:10px;flex-wrap:wrap} | |
| .btns button,.primary{border:0;border-radius:12px;padding:12px 18px;font-weight:700;background:linear-gradient(120deg,#fff0d0,#f5d58a 40%,#c99a45);color:#1d1406;box-shadow:0 6px 20px rgba(243,211,139,.25)} | |
| .ghost{margin-top:12px;border:1px solid var(--line);background:none;border-radius:12px;padding:10px 16px;color:var(--gold)} | |
| .ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 22px} | |
| .ex-grid label{display:flex;align-items:center;gap:12px;color:var(--mut);font-size:14px;flex-wrap:wrap} | |
| .ex-run{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap} | |
| .ex-run .ghost{margin:0} | |
| .prog{flex:1;min-width:180px;height:8px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden} | |
| .prog div{height:100%;width:0;background:linear-gradient(90deg,#c98774,#f5d58a)} | |
| .msg{font-size:13px;color:var(--mut);width:100%} | |
| .ex-out a{display:inline-block;margin-top:10px;margin-right:10px;padding:10px 16px;border-radius:12px;border:1px solid var(--gold);text-decoration:none} | |
| .ex-out video{display:block;max-width:100%;max-height:60vh;margin-top:12px;border-radius:12px} | |
| .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} | |
| .tabs button{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:8px 18px;color:var(--mut)} | |
| .tabs button.on{border-color:var(--gold);color:#1d1406;background:linear-gradient(120deg,#f5d58a,#c99a45);font-weight:700} | |
| .pub{display:grid;grid-template-columns:1.1fr 1fr;gap:24px} | |
| .field{margin-bottom:14px} | |
| .field h4{display:flex;justify-content:space-between;align-items:center;margin:0 0 6px;font-size:14px;color:var(--gold)} | |
| .field h4 small{color:var(--mut);font-weight:400} | |
| .field h4 small.ok::before{content:"✓ ";color:#8fd18a} | |
| .field pre{white-space:pre-wrap;margin:0;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid var(--line);font:15px/1.7 "Noto Sans SC",sans-serif} | |
| .copy{font-size:12px;border:1px solid var(--line);background:none;border-radius:8px;padding:2px 10px;color:var(--gold);margin-left:8px} | |
| .covers{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start} | |
| .covers figure{margin:0} | |
| .covers img{width:100%;border-radius:12px;box-shadow:0 0 0 1px var(--line)} | |
| .covers figcaption{font-size:12px;color:var(--mut);display:flex;justify-content:space-between} | |
| footer{text-align:center;color:var(--mut);font-size:13px;padding:24px 16px 40px} | |
| @media (max-width:820px){ | |
| .hero{padding-top:40px} | |
| .lead br{display:none} | |
| .eyebrow{letter-spacing:.12em;font-size:12px} | |
| main{padding:8px 10px 30px} | |
| .stage-wrap.portrait{height:auto;width:100%;max-height:none} | |
| .chapters{grid-template-columns:repeat(2,1fr)} | |
| .card-grid,.pub{grid-template-columns:1fr} | |
| .ex-grid{grid-template-columns:1fr} | |
| .panel{padding:18px;border-radius:18px} | |
| .controls .time{order:5;width:100%;text-align:center} | |
| } | |