:root{color-scheme:dark;--card:rgba(22,33,62,.92);--txt:#f5efe0;--acc:#c9a84c;--gold:#c9a84c;--gold2:#f0d080;--line:rgba(255,255,255,.16);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:system-ui,sans-serif;color:var(--txt);background:radial-gradient(ellipse at 15% 10%,rgba(109,76,241,.35),transparent 55%),radial-gradient(ellipse at 85% 85%,rgba(201,168,76,.28),transparent 55%),linear-gradient(160deg,#0a0a0f,#16213e 70%,#1b1033) fixed;font-family:Raleway,system-ui,sans-serif}
button,select,input{font:inherit;color:var(--txt)}
button{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 10px;cursor:pointer}
button:hover{border-color:var(--acc)} button.on{background:var(--acc);color:#1a1200;border-color:var(--acc)}
select,input[type=number],input[type=text],input[type=email],input[type=password]{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 8px}
.view{display:none;padding:14px;max-width:1200px;margin:auto} .view.show{display:block}
.card{background:var(--card);border-radius:18px;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.3);backdrop-filter:blur(8px)}
.logo{font-family:'Pacifico',cursive;font-size:2.2rem;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
#auth .card{max-width:360px;margin:12vh auto 0;display:grid;gap:10px;text-align:center}
#auth .logo{color:var(--acc);text-shadow:none}
#err{color:#d33;min-height:1.2em;font-size:.9rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.pc{background:var(--card);border-radius:16px;overflow:hidden;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.25);transition:transform .15s}
.pc:hover{transform:translateY(-4px)}
.pc .th{aspect-ratio:3/4;background:#fff center/cover;display:grid;place-items:center;font-size:2rem}
.pc .in{padding:10px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.pc small{opacity:.7}
.new{display:grid;place-items:center;min-height:190px;font-size:1.1rem;border:2px dashed #fff;background:rgba(255,255,255,.15);color:#fff}
input[type=color]{width:34px;height:32px;padding:0;border:0;background:none;cursor:pointer}
.frame[data-f=gold]{border:10px solid;border-image:linear-gradient(135deg,#f9e27d,#b8860b,#fff3b0,#8a6508,#f9e27d) 1;outline:3px solid #3b2a07;outline-offset:-3px}
.frame[data-f=wood]{border:12px ridge #8a5a2b;border-radius:6px}
.frame[data-f=neon]{border:6px solid #0ff;border-radius:16px;box-shadow:0 0 18px #0ff,0 0 50px #f0f,inset 0 0 18px #f0f}
.frame[data-f=white]{border:16px solid #fafafa;box-shadow:0 0 0 2px #bbb,inset 0 0 12px rgba(0,0,0,.25),0 20px 60px rgba(0,0,0,.5)}
.paper{position:relative;aspect-ratio:1240/1754;background:#fff;overflow:hidden;--k:1}
.paper[data-p=lined]{background-image:linear-gradient(#7aa2e066 1px,transparent 1px);background-size:100% calc(47px*var(--k))}
.paper[data-p=grid]{background-image:linear-gradient(#7aa2e055 1px,transparent 1px),linear-gradient(90deg,#7aa2e055 1px,transparent 1px);background-size:calc(41px*var(--k)) calc(41px*var(--k))}
.paper[data-p=dots]{background-image:radial-gradient(#8887 1.5px,transparent 2px);background-size:calc(41px*var(--k)) calc(41px*var(--k))}
#lyr{position:absolute;inset:0}
.ly{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.ly:not(.act){pointer-events:none}
.ly.act{cursor:crosshair}
#tl{position:absolute;inset:0;pointer-events:none}
.tt #tl{pointer-events:auto;cursor:text} .tt .ly.act{cursor:text}
.tw{position:absolute;pointer-events:none;color:#222}
.tt .tw{pointer-events:auto}
.tb{min-width:30px;min-height:1.2em;outline:1px dashed transparent;padding:2px 4px;white-space:pre-wrap;color:inherit;line-height:1.25}
.tt .tb:focus,.tt .tb:hover{outline-color:var(--acc)}
.hd{display:none;position:absolute;left:-2px;top:-20px;font:14px sans-serif;background:var(--acc);color:#fff;border-radius:6px;padding:0 5px;cursor:move;touch-action:none}
.tt .tw:focus-within .hd,.tt .tw:hover .hd{display:block}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:8px 14px;border-radius:10px;display:none;z-index:9}
#modal,#exm{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;place-items:center;z-index:8}
#modal .card,#exm .card{max-width:520px;width:92%}
.bgs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.bgs div{aspect-ratio:3/2;border-radius:10px;cursor:pointer;border:2px solid #fff}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
#exi{min-height:1.4em}
#pa{display:none}
@media print{body{background:#fff!important}body>*:not(#pa){display:none!important}#pa{display:block}#pa img{width:100%;display:block;page-break-after:always}@page{size:A4 portrait;margin:0}}
#bgv{display:none;position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
body.vid #bgv{display:block}

.logo{font-family:'Cinzel Decorative',serif!important;font-size:1.8rem}
#home{max-width:none;padding:0}
.nav{display:flex;gap:12px;align-items:center;padding:14px 28px;flex-wrap:wrap}
.nav a{color:var(--txt);text-decoration:none;opacity:.8}.nav a:hover{color:var(--gold2);opacity:1}
.brand{font-family:'Cinzel Decorative',serif;color:var(--gold);letter-spacing:.08em;font-size:1.1rem}
.sp{flex:1}
#home section{max-width:1200px;margin:auto;padding:50px 24px;scroll-margin-top:10px}
#home .hero{max-width:none;min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px}
.eyebrow{margin:0;letter-spacing:.3em;text-transform:uppercase;font-size:.8rem;color:var(--gold2)}
.hero h1{margin:0;font-family:'Cinzel Decorative',serif;font-size:clamp(2.8rem,11vw,7rem);line-height:1}
.gold{background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.wh{color:#fff}
.hero .sub{max-width:620px;line-height:1.7;opacity:.82;font-size:1.05rem;margin:0}
.cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.gbtn{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1200;border:0;padding:12px 26px;font-weight:700;border-radius:10px;font-size:1rem}
.obtn{border:1px solid var(--txt);color:var(--txt);padding:12px 26px;border-radius:10px;text-decoration:none}.obtn:hover{border-color:var(--gold);color:var(--gold2)}
.scroll{margin-top:26px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.scroll i{display:block;width:1px;height:40px;background:var(--gold);margin:8px auto 0;animation:sc 1.6s infinite}@keyframes sc{50%{transform:scaleY(.4)}}
.lbl{color:var(--gold);letter-spacing:.25em;text-transform:uppercase;font-size:.75rem;text-align:center;margin:0}
#home h2{font-family:'Cinzel Decorative',serif;text-align:center;margin:.3em 0 1.4em;font-size:2rem}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.fc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;transition:.2s}
.fc:hover{transform:translateY(-5px);border-color:var(--gold)}
.fc span{font-size:2.2rem}.fc h3{font-family:'Cinzel Decorative',serif;color:var(--gold);font-size:1rem;margin:.6em 0 .4em}.fc p{margin:0;opacity:.75;line-height:1.6;font-size:.92rem}
footer{text-align:center;padding:26px;opacity:.55;font-size:.85rem}
.pc{border:1px solid var(--line)}.pc:hover{border-color:var(--gold)}
.frame[data-f=gold]{position:relative}
#auth small{opacity:.65;font-size:.78rem;line-height:1.4}

.frame[data-f=none]{border:0}
.frame[data-f=gold],.frame[data-f=wood],.frame[data-f=none]{box-shadow:0 6px 30px rgba(0,0,0,.5)}
.pc{border-radius:10px}.fc{border-radius:10px}
.fc span svg{width:30px;height:30px;color:var(--gold)}
.pc .th .ic{width:38px;height:38px;color:#bbb}
.ic{width:18px;height:18px;vertical-align:middle;flex:none}
#ed.show{display:flex}
#ed{max-width:none;padding:0;flex-direction:column;height:100dvh;margin:0}
.eh{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--bh);border-bottom:1px solid var(--line)}
.eh #ttl{background:transparent;border:1px solid transparent;font-size:1rem;font-weight:600;width:min(280px,30vw)}
.eh #ttl:hover,.eh #ttl:focus{border-color:var(--line)}
.muted{font-size:.78rem;opacity:.6}
.ib{width:34px;height:34px;padding:0;display:grid;place-items:center;background:transparent;border-color:transparent}
.ib:hover{background:var(--hov)}
.zoom{display:flex;align-items:center;gap:2px;font-size:.85rem}.zoom span{min-width:46px;text-align:center}
.pri{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1200;border:0;font-weight:600;display:flex;gap:6px;align-items:center;padding:7px 14px}
.rb{background:var(--br);border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:2px;padding:6px 14px 0}
.tabs button{border-radius:8px 8px 0 0;padding:6px 18px;font-size:.85rem;background:transparent;border:0;opacity:.7}
.tabs button.on{background:var(--bp);color:var(--gold2);opacity:1}
.panel{display:flex;padding:8px 14px;background:var(--bp);overflow-x:auto;align-items:stretch;min-height:76px}
.panel[hidden]{display:none}
.grp{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:0 14px;border-right:1px solid var(--line);gap:6px}
.grp:last-child{border:0}
.grp>label{font-size:.66rem;opacity:.5;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.rb .row{display:flex;align-items:center;gap:4px;margin:0;flex-wrap:nowrap}
.rb button{background:transparent;border:1px solid transparent;padding:6px 8px;display:flex;align-items:center;gap:6px;font-size:.85rem;border-radius:8px}
.rb button:hover{background:var(--hov)}
.rb button.on{background:rgba(201,168,76,.25);border-color:var(--gold);color:var(--gold2)}
.rb select{max-width:150px}
.chk{display:flex;gap:4px;align-items:center;font-size:.85rem}
#sw span{display:inline-block;width:18px;height:18px;border-radius:4px;margin:0 1px;border:1px solid rgba(255,255,255,.4);cursor:pointer}
#szv{min-width:22px;font-size:.8rem}
.body{flex:1;display:flex;min-height:0;background:var(--bw)}
#thumbs{width:116px;flex:none;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:12px;background:var(--bt);border-right:1px solid var(--line)}
.th2{position:relative;aspect-ratio:1240/1754;background:#fff center/cover;border-radius:3px;cursor:pointer;outline:2px solid transparent;flex:none}
.th2.cur{outline-color:var(--gold)}.th2 b{position:absolute;bottom:2px;right:4px;font-size:.65rem;color:#555}
.addp{padding:8px;display:flex;justify-content:center;border:1px dashed var(--line)}
.wsw{position:relative;flex:1;min-width:0;display:flex}
.sc{flex:1;min-width:0;overflow:auto;display:flex;padding:28px 24px 60px}
#rot{position:relative;flex:none}
.sc .frame{position:absolute;left:0;top:0;transform-origin:0 0;background:#fff;min-width:0}
.ar{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;padding:0;display:grid;place-items:center;background:var(--bar);border:1px solid var(--line);z-index:3}
#prev{left:14px}#next{right:22px}
.ar:hover{border-color:var(--gold);color:var(--gold2)}
.sb{display:flex;gap:16px;padding:5px 14px;font-size:.75rem;background:var(--bh);border-top:1px solid var(--line);opacity:.8}
.tb ul,.tb ol{margin:0;padding-left:1.4em}
@media(max-width:820px){#thumbs{display:none}.grp{padding:0 8px}}
#zl{cursor:pointer}
.sc .frame{border:0!important;outline:0!important}

#ed{--bh:#0d0f16;--br:#151824;--bp:#1d2133;--bw:#2b2d36;--bt:#1a1c25;--bar:rgba(10,10,15,.8);--hov:rgba(255,255,255,.08);color:var(--txt)}
#ed.light{--bh:#f9fbfd;--br:#f9fbfd;--bp:#edf2fa;--bw:#eef1f6;--bt:#ffffff;--bar:rgba(255,255,255,.92);--hov:rgba(0,0,0,.07);--txt:#1f1f1f;--line:rgba(0,0,0,.14);--card:#ffffff;--gold2:#8a6500}
#ed.light .frame{box-shadow:0 1px 4px rgba(0,0,0,.25),0 4px 18px rgba(0,0,0,.12)!important}
.ct{display:flex;justify-content:center;align-items:center;gap:10px;font-size:1.1rem}.ct svg{color:var(--gold)}.ct a,footer a{color:var(--gold2)}
.mn{display:none;gap:2px;padding:0 14px 4px;background:var(--bh);position:relative}
#ed.dm .mn{display:flex}
.mn>button{background:transparent;border:0;padding:3px 9px;font-size:.84rem;border-radius:6px}
.mn>button:hover{background:var(--hov)}
.menu{position:absolute;z-index:20;min-width:240px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:6px 10px;border-radius:6px;font-size:.85rem}
.menu button:hover{background:var(--hov)}
.sw{display:flex;gap:6px;align-items:center;font-size:.82rem;cursor:pointer;white-space:nowrap}
.dmonly{display:none!important}
#ed.dm .dmonly{display:flex!important}
#ed.dm:not(.xt) .tabs{display:none}
#ed.dm .rb{background:var(--bh)}
#ed.dm:not(.xt) #tab-t{border-radius:28px;margin:6px 14px 8px;min-height:48px;padding:4px 16px;align-items:center}
#ed.dm:not(.xt) #tab-t .grp{flex-direction:row;padding:0 8px}
#ed.dm:not(.xt) #tab-t .grp>label,#ed.dm:not(.xt) #tab-t .grp.nodm{display:none}
#doc{position:absolute;inset:0;overflow:hidden;outline:0;color:#202124;font-family:Arial,sans-serif;line-height:1.15;word-wrap:break-word;pointer-events:none;caret-color:#202124}
#ed.dm:not(.dr) #doc{pointer-events:auto;cursor:text}
#doc h1{font-size:2em;margin:.3em 0}#doc h2{font-size:1.5em;margin:.3em 0}#doc h3{font-size:1.17em;margin:.3em 0}
#doc ul,#doc ol{margin:0;padding-left:1.6em}#doc hr{border:0;border-top:1px solid #999}
.th2 .tx{position:absolute;inset:8% 10%;overflow:hidden;font-size:3px;line-height:1.3;color:#444;word-break:break-all}

.body{display:grid;grid-template-columns:24px 116px minmax(0,1fr);grid-template-rows:24px minmax(0,1fr)}
#cn{grid-area:1/1/2/3;display:grid;place-items:center;font-size:10px;opacity:.75;background:var(--bh);border-bottom:1px solid var(--line)}
#rh{grid-area:1/3;width:100%;height:24px;display:block;min-width:0}
#rv{grid-area:2/1;width:24px;height:100%;display:block;min-height:0}
#thumbs{grid-area:2/2}
.wsw{grid-area:2/3;min-height:0}
@media(max-width:820px){.body{grid-template-columns:24px minmax(0,1fr)}#cn{grid-area:1/1}#rh{grid-area:1/2}#rv{grid-area:2/1}.wsw{grid-area:2/2}}

#paper.brush .ly.act{cursor:none}
#paper{isolation:isolate}
#bc{position:fixed;z-index:50;pointer-events:none;border:1px solid #fff;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000;border-radius:50%;transform:translate(-50%,-50%);display:none}
#bc::after{content:'';position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;background:#fff;border-radius:50%;box-shadow:0 0 0 1px #000}
#ed.nor .body{grid-template-columns:116px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#ed.nor #cn,#ed.nor #rh,#ed.nor #rv{display:none}
#ed.nor #thumbs{grid-area:1/1}#ed.nor .wsw{grid-area:1/2}
#ed.focus .eh,#ed.focus .mn,#ed.focus .rb,#ed.focus #thumbs,#ed.focus .ar{display:none!important}
#ed.focus .body{grid-template-columns:minmax(0,1fr)}
#ed.focus .wsw{grid-area:1/1}
#ed.fitall .sc{padding:6px}
@media(max-width:820px){#ed.nor .body{grid-template-columns:minmax(0,1fr)}#ed.nor .wsw{grid-area:1/1}}
#fpill{display:none;position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:40;gap:2px;align-items:center;padding:5px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);opacity:.3;transition:opacity .2s;box-shadow:0 6px 24px rgba(0,0,0,.4);max-width:96vw;overflow-x:auto}
#fpill:hover,#fpill:focus-within{opacity:1}
#ed.focus #fpill{display:flex}
#fpill button{background:transparent;border:0;flex:none;color:var(--txt)}
#fpill input[type=color]{flex:none}
#fpn{font-size:.8rem;min-width:38px;text-align:center}
.fsep{width:1px;height:20px;background:var(--line);margin:0 4px;flex:none}
#lyp{position:absolute;top:12px;right:12px;width:210px;z-index:6;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 30px rgba(0,0,0,.35);max-height:calc(100% - 24px)}
#lyp[hidden]{display:none}
.lh{display:flex;justify-content:space-between;align-items:center;font-size:.85rem}
.lo{display:flex;gap:6px;align-items:center;font-size:.75rem}.lo input{flex:1;min-width:0}
#lyl{overflow:auto;display:flex;flex-direction:column;gap:3px;min-height:70px}
.lr{display:flex;align-items:center;gap:4px;padding:3px 4px;border-radius:6px;border:1px solid transparent;cursor:pointer;font-size:.82rem}
.lr.on{background:rgba(201,168,76,.22);border-color:var(--gold)}
.lr span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr button,.lf button{padding:3px 5px;background:transparent;border:1px solid transparent;display:grid;place-items:center}
.lr button:hover,.lf button:hover{background:var(--hov)}
.lf{display:flex;gap:2px;justify-content:space-between}
#ed.lyon #next{right:236px}

.panel{flex-wrap:wrap;row-gap:8px}
#ed.dm:not(.xt) #tab-t{flex-wrap:nowrap}
#ed.focus #lyp{display:none}
#paper.hand .ly.act{cursor:grab}#paper.mv .ly.act{cursor:move}
#sw{display:grid;grid-template-columns:repeat(4,18px);gap:2px}
#sw span{width:18px;height:18px;margin:0}
#rc{display:flex;gap:2px;flex-wrap:wrap;width:78px;min-height:12px;justify-content:center}
#rc span{width:12px;height:12px;border-radius:3px;border:1px solid rgba(255,255,255,.4);cursor:pointer}
.lo select{flex:1;min-width:0;padding:3px 4px;font-size:.78rem}
.lk{font-size:.75rem;display:flex;gap:6px;align-items:center;padding:0 2px}
#ed.light{color-scheme:light}