:root{ --accent:#b13b29; --accent-hover:#c64834; --accent-dark:#81271c; --header-text:#ffd8dc; --bg:#111011; --surface:#181718; --surface-raised:#1e1c1d; --surface-hover:#252223; --line:#353032; --line-soft:#292627; --text:#f4f1f0; --muted:#aca5a3; --quiet:#797270; --danger:#e06259; --max:1320px; color-scheme:dark; font-family:"Trebuchet MS",Arial,Helvetica,sans-serif; } *{box-sizing:border-box} html{background:var(--bg);scrollbar-gutter:stable} body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-family:inherit;font-size:15px;line-height:1.45} a{color:inherit;text-decoration:none}a:hover{color:#fff} img{display:block;max-width:100%} button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer} code{padding:.12rem .38rem;border:1px solid var(--line);border-radius:3px;background:#0c0b0c;color:#ffd7d1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em} .site-header{position:sticky;top:0;z-index:20;background:var(--accent);border-bottom:1px solid var(--accent-dark);color:var(--header-text)} .header-inner{max-width:var(--max);height:72px;margin:auto;padding:0 20px;display:flex;align-items:center;gap:22px} .brand{display:flex;align-items:center;flex:0 0 auto;width:196px;height:62px;color:var(--header-text)} .brand img{width:196px;height:auto;max-height:58px;object-fit:contain;object-position:left center} .main-nav{height:100%;display:flex;align-items:stretch;gap:1px} .nav-link{display:flex;align-items:center;padding:0 14px;border-bottom:2px solid transparent;color:var(--header-text);font-size:14px;font-weight:700;margin-bottom:-1px} .nav-link:hover{background:rgba(70,8,4,.18);color:#fff1f2} .nav-link.active{background:rgba(70,8,4,.22);color:#fff1f2;border-bottom-color:var(--header-text)} .header-actions{margin-left:auto;display:flex;align-items:center;gap:7px} .nav-action{min-height:34px;display:inline-flex;align-items:center;padding:0 11px;border:1px solid var(--header-text);border-radius:3px;background:var(--header-text);color:var(--accent-dark);font-size:13px;font-weight:800} .nav-action:hover{background:#ffe5e8;color:var(--accent-dark)} .nav-action.ghost{background:rgba(82,12,7,.20);border-color:rgba(255,216,220,.52);color:var(--header-text)} .nav-action.ghost:hover{background:rgba(82,12,7,.36);color:#fff} .page-shell{width:100%;max-width:var(--max);margin:0 auto;padding:28px 20px 68px;flex:1 0 auto} .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 18px;padding-bottom:11px;border-bottom:1px solid var(--line)} .page-head>div{min-width:0}.page-head h1{margin:0;font-size:30px;line-height:1.08;letter-spacing:-.02em}.page-head p{margin:6px 0 0;color:var(--muted);max-width:760px}.page-head.split{align-items:center} .section{margin-top:30px}.section.first-section{margin-top:0}.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;padding:0 0 8px;border-bottom:1px solid var(--line)}.section-head h1,.section-head h2{margin:0;font-size:21px}.section-head>a{color:#e78a7d;font-size:13px;font-weight:800}.section-head>span{color:var(--muted);font-size:12px;font-weight:700} .notice{margin:0 0 16px;padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:3px;background:var(--surface);font-size:14px} .panel,.detail-panel,.comments-panel,.player-card,.auth-card{border:1px solid var(--line);border-radius:4px;background:var(--surface)} .panel-title{padding:9px 11px;border-bottom:1px solid var(--line);background:var(--surface-raised);font-size:13px;font-weight:800;letter-spacing:.01em} .detail-body,.comments-body,.auth-body{padding:14px 16px} .button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 12px;border:1px solid var(--line);border-radius:3px;background:var(--surface-raised);color:var(--text);font-weight:800;line-height:1.1} .button:hover{background:var(--surface-hover);border-color:#51494c}.button.primary{background:var(--accent);border-color:var(--accent);color:#fff}.button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.button.subtle{background:var(--surface-raised)}.button.danger{border-color:#713833;background:#351d1b;color:#ffb9b3}.button.wide{width:100%}.button.small{min-height:28px;padding:4px 8px;font-size:12px} input,textarea,select{width:100%;border:1px solid var(--line);border-radius:3px;background:#100f10;padding:8px 9px;outline:none}input:focus,textarea:focus,select:focus{border-color:#965043;box-shadow:0 0 0 2px rgba(177,59,41,.14)}label{display:grid;gap:5px;color:#d8d2d0;font-size:13px;font-weight:700}form{margin:0} .home-intro-card{display:flex;align-items:center;gap:16px;margin:0 0 24px;padding:13px 14px;border:1px solid var(--line);border-radius:4px;background:var(--surface)} .home-intro-main{min-width:0;display:grid;gap:2px;flex:1}.home-intro-main>strong{font-size:18px}.home-intro-main>p{margin:2px 0 0;color:var(--muted);font-size:12px}.home-intro-eyebrow{color:#df8376;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.07em}.home-intro-actions{display:flex;align-items:center;gap:7px} .flipnote-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px} .flipnote-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:4px;background:var(--surface);transition:border-color .12s ease,background .12s ease} .flipnote-card:hover{border-color:#554d4f;background:#1b191a}.flipnote-thumb{display:block;aspect-ratio:4/3;background:#090909;overflow:hidden}.flipnote-thumb>img{width:100%;height:100%;object-fit:cover}.flipnote-card-body{padding:9px 10px 10px}.flipnote-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:850;color:#f6f2f1}.flipnote-creator{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d98b7e;font-size:11px;font-weight:700}.flipnote-meta{display:flex;justify-content:space-between;gap:8px;margin-top:7px;color:var(--muted);font-size:10px} .tabs{display:flex;align-items:center;gap:4px;padding:3px;border:1px solid var(--line);border-radius:4px;background:var(--surface)}.tabs a{padding:5px 8px;border-radius:2px;color:#d5cecc;font-size:12px;font-weight:750}.tabs a:hover{background:var(--surface-raised);color:#fff} .watch-layout{display:grid;grid-template-columns:minmax(0,760px) 260px;gap:20px;align-items:start}.player-card{overflow:hidden;background:#080708}.player-card img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#080708}.detail-panel{position:sticky;top:92px}.stats{display:grid;gap:0;margin:0 0 14px}.stats div,.account-list div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line-soft)}.stats dt,.account-list dt{color:var(--muted);font-size:12px}.stats dd,.account-list dd{margin:0;font-weight:800}.comments-panel{overflow:hidden}.comment-form{display:flex;gap:8px;margin-bottom:14px}.comment-form input{min-width:0;flex:1}.comment{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:12px;padding:10px 0;border-top:1px solid var(--line-soft)}.comment>a{color:#dc8b7f;font-weight:800}.comment small{color:var(--quiet);white-space:nowrap}.memo-label{font-style:italic;color:#c8bdbb} .about-panel{overflow:hidden}.about-body{padding:15px 16px}.about-body>p:first-child{margin-top:0}.about-body>p:last-child{margin-bottom:0}.credit-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:13px;border-top:1px solid var(--line-soft)}.credit-item{padding:12px 0;border-bottom:1px solid var(--line-soft)}.credit-item strong{display:block;color:#f6f2f1}.credit-item strong a:hover{color:#fff;text-decoration:underline}.credit-item small{display:block;margin-top:2px;color:#d98b7e;font-size:11px;font-weight:700}.credit-item p{margin:5px 0 0;color:var(--muted);font-size:13px}.about-note{margin:16px 0 0;color:var(--muted);font-size:12px} .auth-wrap{max-width:470px;margin:35px auto}.auth-card{overflow:hidden}.stacked-form{display:grid;gap:12px}.auth-link{margin:14px 0 0;text-align:center;color:var(--muted)}.auth-link a{color:#df8679;font-weight:800}.account-panel{max-width:700px}.account-panel p{margin-top:0}.account-list{margin:12px 0 15px}.admin-ban-form{display:grid;grid-template-columns:minmax(160px,240px) minmax(220px,1fr) auto;gap:8px;padding:12px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:4px;background:var(--surface)}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}th{background:var(--surface-raised);color:#d9d2d0;font-size:12px}tr:last-child td{border-bottom:0}.empty-state{padding:18px;border:1px dashed var(--line);border-radius:4px;color:var(--muted);text-align:center}.empty-state.small{padding:8px;border:0;text-align:left} /* Flipnote detail page */ .watch-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 18px;padding-bottom:13px;border-bottom:1px solid var(--line)} .watch-head h1{margin:1px 0 0;font-size:30px;line-height:1.08;letter-spacing:-.02em}.watch-head p{margin:6px 0 0;color:var(--muted)}.watch-head p a{color:#df8a7d;font-weight:800}.watch-head p span{padding:0 4px;color:var(--quiet)}.watch-kicker{color:#df8376;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em} .watch-layout-rich{grid-template-columns:minmax(0,820px) 310px}.watch-preview{border-color:#3c3638}.preview-bar,.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-raised);color:var(--muted);font-size:11px;font-weight:700}.preview-bar{padding:8px 11px;border-bottom:1px solid var(--line)}.preview-bar span:last-child{padding:2px 6px;border:1px solid var(--line);border-radius:2px;background:#111;color:#d6cfcd;font-size:10px}.preview-stage{display:flex;align-items:center;justify-content:center;min-height:360px;background:#080708}.preview-stage img{width:100%;max-height:615px;object-fit:contain}.preview-footer{padding:9px 11px;border-top:1px solid var(--line)}.preview-footer a{color:#e18a7d;font-weight:800} .watch-details{overflow:hidden}.creator-summary{display:grid;gap:1px;padding:13px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface-raised),var(--surface))}.creator-label{color:var(--quiet);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.creator-name{font-size:18px;font-weight:850;color:#f7f2f1}.creator-summary>span:last-child{color:var(--muted);font-size:11px}.watch-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--line)}.watch-stat-grid div{padding:11px 12px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}.watch-stat-grid div:nth-child(2n){border-right:0}.watch-stat-grid div:nth-last-child(-n+2){border-bottom:0}.watch-stat-grid strong,.watch-stat-grid span{display:block}.watch-stat-grid strong{font-size:18px}.watch-stat-grid span{margin-top:1px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em}.watch-info{padding:7px 13px 10px}.watch-info>div{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:11px}.watch-info>div:last-child{border-bottom:0}.watch-info span{color:var(--muted)}.watch-info strong,.watch-info code{max-width:180px;text-align:right;overflow-wrap:anywhere}.watch-details>.button{margin:0 13px 13px;width:calc(100% - 26px)} .comments-title{display:flex;align-items:center;justify-content:space-between}.comments-title span:last-child{min-width:25px;padding:1px 7px;border-radius:10px;background:#111;color:var(--muted);text-align:center;font-size:10px}.comment{grid-template-columns:160px minmax(0,1fr);gap:16px;padding:13px 0}.comment-author{display:grid;align-content:start;gap:3px}.comment-author a{color:#dc8b7f;font-weight:800}.comment-author small{color:var(--quiet);white-space:normal;font-size:10px}.comment-content{min-width:0}.comment-text{white-space:pre-wrap;overflow-wrap:anywhere}.memo-comment-preview{display:inline-grid;gap:6px;max-width:280px;color:var(--muted);font-size:11px;font-weight:700}.memo-comment-preview img{width:256px;max-width:100%;aspect-ratio:4/3;object-fit:contain;border:1px solid var(--line);background:#080708}.memo-comment-preview:hover span{color:#fff}.related-grid{grid-template-columns:repeat(4,minmax(0,1fr))} /* Built-in documentation */ .docs-page-head p{max-width:900px}.docs-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:24px;align-items:start}.docs-nav{position:sticky;top:92px;overflow:hidden}.docs-nav nav{display:grid;padding:6px}.docs-nav a{padding:7px 8px;border-radius:2px;color:var(--muted);font-size:11px;font-weight:700}.docs-nav a:hover{background:var(--surface-raised);color:#fff}.docs-content{min-width:0}.docs-section{scroll-margin-top:95px;margin:0 0 34px;padding:0 0 28px;border-bottom:1px solid var(--line)}.docs-section:last-child{border-bottom:0}.docs-section h2{margin:0 0 13px;font-size:24px;letter-spacing:-.01em}.docs-section h3{margin:22px 0 8px;font-size:16px;color:#f1e9e7}.docs-section p{max-width:980px;margin:9px 0;color:#c9c1bf}.docs-section code{font-size:.86em}.docs-section pre{max-width:100%;overflow:auto;margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:4px;background:#0b0a0b;color:#eadfdd}.docs-section pre code{padding:0;border:0;background:none;color:inherit}.docs-table{margin:13px 0 17px;border:1px solid var(--line);background:var(--surface);font-size:12px}.docs-table th{white-space:nowrap}.docs-table td{vertical-align:top;color:#c9c1bf}.docs-table td:first-child{color:#eee7e5}.docs-table code{white-space:nowrap}.docs-steps{max-width:980px;margin:10px 0;padding-left:24px;color:#c9c1bf}.docs-steps li{margin:7px 0;padding-left:3px}.docs-section a{color:#df8a7d;text-decoration:underline;text-decoration-color:transparent}.docs-section a:hover{text-decoration-color:currentColor}.docs-notice{max-width:980px;margin:13px 0;padding:11px 13px;border:1px solid #70423b;border-left:4px solid var(--accent);border-radius:3px;background:#211513;color:#d9cfcc;font-size:12px;line-height:1.55}.docs-notice strong{color:#fff} .site-footer{width:100%;max-width:var(--max);margin:0 auto;padding:18px 20px 24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:12px}.site-footer>div{display:flex;gap:12px;align-items:center}.site-footer a{color:#cf8175} @media(max-width:1050px){.flipnote-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.watch-layout{grid-template-columns:minmax(0,1fr) 270px}.docs-layout{grid-template-columns:205px minmax(0,1fr)}} @media(max-width:820px){.credit-list{grid-template-columns:1fr}.docs-layout{grid-template-columns:1fr}.docs-nav{position:static}.docs-nav nav{grid-template-columns:repeat(3,minmax(0,1fr))}.watch-head{align-items:flex-start}.related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.header-inner{height:auto;min-height:68px;flex-wrap:wrap;gap:0 12px;padding-top:6px;padding-bottom:6px}.brand{width:164px;height:54px}.brand img{width:164px}.main-nav{order:3;width:100%;height:36px}.nav-link{padding:0 10px}.header-actions{margin-left:auto}.flipnote-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.watch-layout{grid-template-columns:1fr}.detail-panel{position:static}.comment{grid-template-columns:120px 1fr}.admin-ban-form{grid-template-columns:1fr}.page-shell{padding-top:20px}} @media(max-width:580px){.docs-nav nav{grid-template-columns:repeat(2,minmax(0,1fr))}.watch-head{flex-direction:column;align-items:stretch}.preview-stage{min-height:220px}.preview-footer{align-items:flex-start;flex-direction:column}.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header-inner{padding-left:12px;padding-right:12px}.brand{width:150px}.brand img{width:150px}.nav-action{padding:0 8px;font-size:12px}.nav-action:not(.ghost){display:none}.page-shell{padding:16px 12px 50px}.page-head,.page-head.split,.home-intro-card,.site-footer{align-items:flex-start;flex-direction:column}.page-head h1{font-size:25px}.tabs{width:100%;justify-content:space-between}.flipnote-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.comment{grid-template-columns:1fr;gap:4px}.comment-form{align-items:stretch;flex-direction:column}.site-footer{padding-left:12px;padding-right:12px}.site-footer>div{flex-wrap:wrap}} /* flipnote.js web player */ .flipnote-stage{position:relative;overflow:hidden;min-height:0;aspect-ratio:4/3}.flipnote-player-canvas{display:none;width:100%;height:100%;align-items:center;justify-content:center;background:#080708;cursor:pointer}.flipnote-stage.is-ready .flipnote-player-canvas{display:flex}.flipnote-player-canvas canvas{display:block;width:100%!important;height:100%!important;max-width:100%;object-fit:contain;background:#080708;image-rendering:auto}.flipnote-player-fallback{display:block;width:100%;height:100%;object-fit:contain;background:#080708}.flipnote-stage.is-ready .flipnote-player-fallback,.flipnote-player-fallback[hidden]{display:none}.flipnote-player-status{position:absolute;left:12px;bottom:12px;padding:5px 8px;border:1px solid rgba(255,255,255,.12);border-radius:3px;background:rgba(8,7,8,.84);color:#d7cfcd;font-size:11px;font-weight:700}.flipnote-big-play{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(8,7,8,.78);color:#fff;font:700 25px/1 system-ui,sans-serif;cursor:pointer;padding:0 0 1px 4px;box-shadow:0 3px 18px rgba(0,0,0,.35)}.flipnote-big-play:hover{background:rgba(177,59,41,.9)}.flipnote-big-play[hidden]{display:none}.flipnote-stage.has-player-error .flipnote-player-status{border-color:#70423b;background:rgba(33,21,19,.94)} .flipnote-controls{display:grid;grid-template-columns:auto minmax(110px,1fr) auto auto auto;gap:8px;align-items:center;padding:8px 10px;border-top:1px solid var(--line);background:#111012}.flipnote-control-button{min-width:58px;height:30px;padding:0 9px;border:1px solid var(--line);border-radius:3px;background:var(--surface-raised);color:#ddd5d3;font:700 11px/1 system-ui,sans-serif;cursor:pointer}.flipnote-control-button:hover:not(:disabled),.flipnote-control-button.is-active{border-color:#7e463e;background:#2a1916;color:#fff}.flipnote-control-button:disabled{opacity:.45;cursor:default}.flipnote-progress{width:100%;min-width:70px;accent-color:var(--accent);cursor:pointer}.flipnote-progress:disabled{cursor:default;opacity:.45}.flipnote-time{min-width:82px;color:var(--muted);font:700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;text-align:center;white-space:nowrap} @media(max-width:580px){.flipnote-controls{grid-template-columns:auto minmax(90px,1fr) auto}.flipnote-time{grid-column:2;text-align:left}.flipnote-control-button[data-action="mute"]{grid-column:3}.flipnote-control-button[data-action="loop"]{grid-column:3}.flipnote-big-play{width:56px;height:56px;font-size:22px}}