:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#21201e;background:#f5f2ec;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.shell{max-width:1080px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.brand{display:flex;align-items:center;gap:12px;font-size:30px;font-weight:700;color:inherit;text-decoration:none}.brand img{width:38px}nav{display:flex;gap:8px;border-bottom:1px solid #d9d3c9;margin-bottom:30px;padding-bottom:12px;overflow:auto}nav a{color:#64615b;text-decoration:none;padding:10px 16px;white-space:nowrap;border-radius:24px}nav a.active{background:#21201e;color:white}h1{font-size:32px;margin:0 0 24px}h2{font-size:20px;margin:0 0 16px}h3{font-size:17px}p{line-height:1.5}label{display:block;font-size:14px;font-weight:600;margin:0 0 18px}input,select,textarea{font:inherit;background:#fff;border:1px solid #cdc7bd;color:inherit;width:100%;border-radius:12px;padding:12px;margin-top:8px}textarea{resize:vertical;min-height:110px}input[type=checkbox]{width:18px;height:18px;margin:0 8px 0 0;vertical-align:middle;accent-color:#bf3826}label.check{font-weight:400;line-height:1.6}.row{display:flex;gap:16px;flex-wrap:wrap}.row>*{flex:1;min-width:140px}button,.button{font:inherit;cursor:pointer;padding:11px 18px;border:1px solid #cbc5bb;border-radius:24px;background:transparent;color:inherit;text-decoration:none;display:inline-block}button.primary,.button.primary{background:#bf3826;color:white;border-color:#bf3826}button:disabled{opacity:.5;cursor:wait}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.panel{background:#fffdf9;border:1px solid #ded8ce;border-radius:20px;padding:24px;margin-bottom:22px}.login{max-width:420px;margin:70px auto}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}.card{overflow:hidden}.card img.cover{width:100%;aspect-ratio:9/8;object-fit:cover;display:block}.card h2{font-size:17px}.pill{border-radius:20px;background:#ebe7df;display:inline-block;font-size:12px;padding:6px 10px}.muted,footer{color:#77716a;font-size:14px}footer{padding:20px 0}#notice:empty{display:none}#notice{border-radius:12px;padding:14px 18px;margin-bottom:20px;background:#ede3d5;line-height:1.5}.error{color:#982817}.empty{border:1px dashed #c9c1b4;border-radius:20px;padding:55px 24px;text-align:center;color:#77716a}.network{display:flex;gap:12px;align-items:center}.network img{height:24px;width:24px}.detail{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:24px}video{display:block;max-height:650px;width:100%;background:#181818;border-radius:18px}.hash{font-family:monospace;font-size:12px;overflow-wrap:anywhere}.texts{white-space:pre-wrap;overflow-wrap:anywhere}pre{white-space:pre-wrap;overflow-wrap:anywhere}.status{font-size:13px;color:#6c665e}.identity{overflow-wrap:anywhere}.help{margin:0 0 24px;max-width:650px;color:#77716a}details{margin-top:22px}summary{cursor:pointer}a{color:#a92d1f}button:hover{border-color:#bf3826}input:focus,textarea:focus,select:focus{outline:2px solid #bf382640;border-color:#bf3826}[hidden]{display:none!important}@media(max-width:640px){.shell{padding:18px}header{margin-bottom:18px}.brand{font-size:27px}nav{gap:2px}nav a{padding:9px 12px;font-size:14px}h1{font-size:27px}.panel{padding:19px}.detail{grid-template-columns:1fr}.login{margin-top:45px}.row{gap:0}.row>*{min-width:100%;max-width:100%}button,.button{max-width:100%;white-space:normal}.actions{gap:8px}}/* Plano 1.2.1: depth, responsive navigation and restrained motion. */
:root{--accent:#bf3826;--ink:#21201e;--paper:#f5f2ec;--ease:cubic-bezier(.22,1,.36,1);color-scheme:light}
body{background:radial-gradient(ellipse at 90% 0%,#e9d5c750,transparent 55%),var(--paper);min-height:100vh}
.shell{padding-top:28px;padding-bottom:35px}header{min-height:72px;margin-bottom:24px}.brand{gap:8px;letter-spacing:-1.4px;font-size:34px}.brand img{width:66px;height:66px;object-fit:contain;filter:drop-shadow(0 5px 5px #44200d12);animation:mark-arrive .9s var(--ease) both;transition:transform .45s var(--ease)}
nav{position:sticky;top:10px;z-index:5;width:fit-content;max-width:100%;padding:6px;gap:4px;border:1px solid #ded8cec0;border-radius:24px;background:#fffdf9ed;box-shadow:0 4px 18px #3c281b08;backdrop-filter:blur(14px)}nav a{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:18px;transition:background .24s,color .24s,box-shadow .24s,transform .24s}nav a.active{box-shadow:0 4px 9px #21201e1c}nav a:before{content:'';display:inline-block;width:17px;height:17px;background:currentColor;mask:no-repeat center/contain;flex-shrink:0}
nav a[href='#create']:before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z'/%3E%3C/svg%3E")}
nav a[href='#review']:before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v2h4v18H5V4h4zM7 6v14h10V6h-2v2H9V6zm3 8-2-2-1 1 3 4 6-6-1-1z'/%3E%3C/svg%3E")}
nav a[href='#history']:before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 1-9.5 7H0l4-5 4 5H4.6A8 8 0 1 0 12 4zm-1 4h2v6l4 3-1 2-5-4z'/%3E%3C/svg%3E")}
nav a[href='#settings']:before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h4l1 4 3 1 3-1 2 4-3 3v2l2 3-3 3-3-2-3 1-1 3H8l-1-4-3-1-3 1-1-4 3-3v-2L1 7l3-3 3 2 3-1zm2 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/%3E%3C/svg%3E")}
h1{letter-spacing:-1px;font-weight:650}h2{letter-spacing:-.35px}.panel{border-color:#ded8ceaa;box-shadow:0 2px 4px #3c281b03,0 10px 32px #3c281b06;background:linear-gradient(150deg,#fffefa,#fffdf9);transition:border-color .3s,box-shadow .3s}.panel .panel{box-shadow:none;background:#f9f6f1}
input,select,textarea{transition:border-color .2s,box-shadow .2s,background .2s;background:#ffffffb8}input:focus,textarea:focus,select:focus{outline:none;box-shadow:0 0 0 4px #bf382617;background:#fff}.check input{transition:transform .2s}.check input:active{transform:scale(.9)}
button,.button{min-height:44px;transition:transform .22s var(--ease),box-shadow .25s,background .25s,border-color .25s;box-shadow:0 2px 2px #21201e04;background:linear-gradient(180deg,#ffffff88,#fffdf955);font-weight:550}button.primary,.button.primary{background:linear-gradient(145deg,#cb4935,#b63222);box-shadow:0 4px 10px #bf382620,inset 0 1px 0 #ffffff25}button:active,.button:active{transform:translateY(1px) scale(.98);box-shadow:0 1px 2px #21201e12}button:disabled{cursor:wait;transform:none}button:focus-visible,.button:focus-visible,nav a:focus-visible,summary:focus-visible{outline:3px solid #bf382640;outline-offset:4px}
.login{margin-top:38px;max-width:440px;padding:30px}.login h1{font-size:29px}.login .primary{width:100%;margin-top:4px}.login>p:last-child{text-align:center;font-size:14px}.empty{background:#fffdf955;border-color:#d4cbc0;padding:64px 24px;box-shadow:inset 0 1px 0 #ffffffb0}.pill{background:#e9e3d9;border:1px solid #ded6ca80}.network img{transition:transform .3s var(--ease)}.app-version{font-size:13px;color:#77716a;margin-top:-3px}.app-version a{text-decoration:none}.grid{align-items:start}.card{transition:transform .3s var(--ease),box-shadow .3s}#notice:not(:empty){animation:notice-arrive .3s var(--ease);border:1px solid #dfd0bb;background:#f0e5d5;box-shadow:0 5px 14px #3c281b08}#notice.error{border-color:#cc847555;background:#faeae4}
#app.view-enter{animation:view-arrive .38s var(--ease) both}#app[aria-busy=true]{cursor:progress}#app[aria-busy=true]:before{content:'';position:fixed;top:0;left:0;height:3px;width:35%;z-index:30;background:var(--accent);animation:busy-line 1s ease-in-out infinite;box-shadow:0 0 8px #bf382650}
#sync{display:flex;gap:8px;align-items:flex-start;line-height:1.5}#sync:not(:empty):before{content:'';height:7px;width:7px;flex-shrink:0;border-radius:50%;margin-top:7px;background:#a59b8d;box-shadow:0 0 0 4px #a59b8d12}#sync.online:before{background:#557e5c;box-shadow:0 0 0 4px #557e5c16;animation:connected 2.8s ease-in-out 2}details{padding-top:12px;border-top:1px solid #ded8ce80}details[open]>:not(summary){animation:view-arrive .3s var(--ease)}
@media(hover:hover){button:not(:disabled):hover,.button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #3c281b12}button.primary:not(:disabled):hover,.button.primary:hover{box-shadow:0 7px 18px #bf382628}.card:hover{transform:translateY(-4px);box-shadow:0 10px 35px #3c281b10}.brand:hover img{transform:perspective(400px) rotateY(-12deg) rotateZ(-3deg)}nav a:not(.active):hover{background:#eae3d8;transform:translateY(-1px)}.network:hover img{transform:scale(1.12) rotate(-5deg)}}
@keyframes mark-arrive{from{opacity:0;transform:perspective(300px) rotateY(-25deg) translateY(8px) scale(.9)}to{opacity:1;transform:perspective(300px) rotateY(0) translateY(0) scale(1)}}@keyframes view-arrive{from{opacity:.35;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes notice-arrive{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes busy-line{0%{transform:translateX(-110%)}100%{transform:translateX(400%)}}@keyframes connected{50%{box-shadow:0 0 0 6px #557e5c06}}
@media(max-width:640px){.shell{padding:16px 18px calc(110px + env(safe-area-inset-bottom))}header{margin-bottom:22px;min-height:60px}.brand{font-size:29px;gap:4px}.brand img{width:58px;height:58px}header button{padding:9px 15px;font-size:14px}nav{position:fixed;top:auto;bottom:calc(12px + env(safe-area-inset-bottom));left:12px;right:12px;max-width:none;width:auto;margin:0;display:grid;grid-template-columns:repeat(4,1fr);padding:6px;gap:3px;border-radius:24px;box-shadow:0 8px 32px #3c281b20;background:#fffdf9f2}nav a{flex-direction:column;gap:5px;padding:9px 4px;font-size:11px;min-height:57px;border-radius:18px}nav a:before{width:19px;height:19px}.login{margin-top:25px;padding:24px}.login h1{font-size:26px}.panel{border-radius:20px}.network{gap:10px}.network img{height:25px;width:25px}.empty{padding:50px 20px}h1{margin-bottom:22px}.grid{gap:3px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.brand:hover img,.card:hover,button:hover,.button:hover{transform:none!important}#app[aria-busy=true]:before{width:100%;opacity:.7}}