body,
html {
 --factor: 1;
 margin: 0;
 padding: 0;
 background: #b1bbc3;
 background: linear-gradient(347deg, #c5cad3 0, #c9d2d6 28%, #a0b4c1 50%, #b6c3d9 76%, #b6c4e2 100%);
 min-height: 100vh;
 overflow-y: visible;
 font-family: Roboto, sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
 font-variation-settings: "wdth" 100
}
.transition-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background: black;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 9999; /* above test everything */
}
.transition-overlay img {
 width: 100%;
 height: 100%;
 object-fit: cover; /* ensures no stretching */
}
#fade {
 position: fixed;
 top: 0; left: 0;
 width: 100%;
 height: 100%;
 background: black;
 pointer-events: none;
 opacity: 0; /* start transparent */
 transition: opacity 0.7s ease;
 z-index: 9999;
}
#fade.active {
 opacity: 1; /* fade to black */
}
.cd-wrapper {
 position: absolute;
 top: 0;
 left: 0;
 width: calc(400.8px*var(--factor));
 height: calc(500px*var(--factor));
 z-index: 10
}
.cd {
background-image: url(/img/ntopbg2web.webp);
 /* background-image: url(/img/vynltestweb.webp); uncomment on launch*/
 background-size: contain;
 background-repeat: no-repeat;
 width: calc(400.8px*var(--factor));
 height: calc(343.6px*var(--factor));
 z-index: 1
}
/* .cd {
 background-image: url(/img/vinyl\ mockup.png);
 background-size: contain;
 background-repeat: no-repeat;
 width: calc(400.8px*var(--factor));
 height: calc(343.6px*var(--factor));
 z-index: 1
} */
.buttons a {
 display: inline-block;
 text-decoration: none;
 margin: 0 15px
}
.buttons {
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 gap: calc(15px*var(--factor));
 padding: calc(5px*var(--factor));
 width: calc(385px*var(--factor));
 height: calc(80px*var(--factor));
 pointer-events: auto
}
:root {
 --social-size: clamp(28px, 4vw, 32px);
 --social-gap: clamp(16px, 3vw, 20px);
 --social-bg: linear-gradient(180deg, #a1a1a1 0, #ebebeb 50%, #b0b0b0 99%, #a1a1a1 100%);
 --social-radius: 30px;
}
.social-bar {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: var(--social-gap);
 background: var(--social-bg);
 padding: 12px 32px;
 border-radius: var(--social-radius);
 width: calc(360px*var(--factor));
 margin: 0 auto;
 box-shadow: 0 2px 8px rgba(30,40,50,0.05);
}
.social-bar a {
 display: flex;
 align-items: center;
 justify-content: center;
 width: var(--social-size);
 height: var(--social-size);
 transition: transform 0.14s cubic-bezier(.4,1,.3,1);
 border-radius: 50%;
}
/* .social-bar a:hover {
 transform: scale(1.12);
 background: #ededed;
} */
.social-bar img {
 width: 100%;
 height: 100%;
 object-fit: contain;
 display: block;
 transition: filter 0.16s;
 filter:invert(31%) sepia(0%) saturate(0%) hue-rotate(94deg) brightness(95%) contrast(91%);
 /* Optional: grayscale on hover for effect
 filter: grayscale(0.3);
 */
}
.social-bar a:hover img {
filter: invert(84%) sepia(9%) saturate(1592%) hue-rotate(153deg) brightness(82%) contrast(87%);
}
.btn-wrapper {
 position: relative;
 width: calc(66.2px*var(--factor));
 height: calc(77.6px*var(--factor));
 display: inline-block;
 left: -10.8px
}
.btn-wrapper a {
 text-decoration: none;
 display: inline-block
}
.btn {
 width: calc(48px*var(--factor));
 height: calc(30px*var(--factor));
 margin: 0 auto;
 cursor: pointer;
 display: inline-block;
 border-radius: 50%;
 box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
 border: none;
 background: radial-gradient(circle at 40% 10%, #f0f0f0 0, #dcdcdc 30%, #b0b0b0 60%, #888 100%);
 background-size: cover
}
#transitionVideo {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.btn-text {
 position: absolute;
 top: 0;
 left: 0;
 visibility:visible !important;
 width: calc(60px*var(--factor));
 height: calc(60px*var(--factor));
 pointer-events: none;
 padding-left: 27px;
 padding-top: 0
}
.btn:hover {
 background: radial-gradient(circle at 40% 40%, #d2d2d2 0, #c6c6c6 30%, #909090 60%, #4f4f4f 100%)
}
.container {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 1rem;
 padding-top: 20px
}
.enter {
 background-image: url(/img/enter.webp);
 background-size: contain;
 background-repeat: no-repeat;
 width: calc(400px*var(--factor));
 height: calc(45px*var(--factor))
}
.jewel {
 background-image: url(/img/fantasticoverlay.webp);
 /* background-image: url(/img/jewel.webp); */
 /* background-image: url(/img/ptcover.png); uncomment on launch */
 background-size: contain;
 background-repeat: no-repeat;
width: calc(400.2px*var(--factor));
 height: calc(367.8px*var(--factor));
}
.icons {
 background-color: grey;
 background-size: contain;
 background-repeat: no-repeat;
 width: calc(431.4px*var(--factor));
 height: calc(52.4px*var(--factor))
}
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}
.player {
 background-image: url(/img/backbgweb.webp);
 background-size: contain;
 width: calc(400px*var(--factor));
 height: calc(448px*var(--factor));
 background-repeat: no-repeat
}
.purple {
 position: relative;
 width: calc(48.4px * var(--factor));
 height: calc(22.8px * var(--factor));
 display: flex;
 justify-content: center;
 align-items: center;
 border-top: 3px solid #c8cbfd;
 border-right: 3px solid #9398ea;
 border-bottom: 3px solid #9398ea;
 border-left: 3px solid #c8cbfd;
 background: #a1a6e7;
 float: right;
 margin-right: calc(23.4px * var(--factor));
 margin-top: calc(13.6px * var(--factor));
 min-width: 0;
 overflow: visible
}
.purple.new::after {
 content: "";
 position: absolute;
 top: -12px;
 right: -12px;
 width: 24px;
 height: 24px;
 background: white;
 /* many-pointed star shape */
 clip-path: polygon(
 50% 0%, 60% 35%, 100% 50%, 60% 65%,
 50% 100%, 40% 65%, 0% 50%, 40% 35%
 );
 animation: spinStar 1.6s linear infinite;
 /* glow effect */
 box-shadow: 0 0 6px white, 0 0 12px white;
}
/* smoother, more "sparkly" spin */
@keyframes spinStar {
 from {
 transform: rotate(0deg) scale(1);
 }
 50% {
 transform: rotate(180deg) scale(1.2);
 }
 to {
 transform: rotate(360deg) scale(1);
 }
}
.purple svg {
 max-width: 100%;
 max-height: 100%;
 width: auto;
 height: auto;
 display: block;
 margin: auto
}
.btn {
 position: relative;
 width: calc(48.4px * var(--factor));
 height: calc(30px * var(--factor));
 display: flex;
 justify-content: center;
 align-items: center;
 min-width: 0;
 overflow: visible
}
.btn svg {
 max-width: 80%;
 max-height: 80%;
 width: auto;
 height: auto;
 display: block;
 margin: auto
}
.purple:hover {
 border-top: 3px solid #989ac0;
 border-right: 3px solid #6d71b0;
 border-bottom: 3px solid #6d71b0;
 border-left: 3px solid #989ac0
}
@media (max-width:600px) {
 :root {
 --scale-factor: 0.7
 }
 .cd-wrapper {
 width: 300px;
 height: 300px
 }
 .jewel {
width: calc(400.2px*var(--factor));
 height: calc(367.8px*var(--factor));
 }
 .enter {
 width: 404.2px;
 height: 45px
 }
 .container {
 margin-top: 0
 }
 body,
 html {
 margin: 0;
 padding: 0;
 background: #bac2c2;
 background: linear-gradient(347deg, #c5cad3 0, #c9d2d6 28%, #a0b4c1 50%, #b6c3d9 76%, #b6c4e2 100%);
 min-height: 100vh;
 overflow-y: visible;
 font-family: Roboto, sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
 font-variation-settings: "wdth" 100
 }
 .cd-wrapper {
 position: absolute;
 top: 0;
 left: 0;
 width: calc(400.8px*var(--scale-factor));
 height: calc(500px*var(--scale-factor));
 z-index: 10
 }
 .cd {
 background-size: contain;
 background-repeat: no-repeat;
 width: calc(400.8px*var(--scale-factor));
 height: calc(343.6px*var(--scale-factor));
 z-index: 1
 }
 .buttons {
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 gap: calc(15px*var(--scale-factor));
 padding: calc(5px*var(--scale-factor));
 width: calc(385px*var(--scale-factor));
 height: calc(80px*var(--scale-factor));
 pointer-events: auto
 }
 .btn-wrapper {
 position: relative;
 width: calc(66.2px*var(--scale-factor));
 height: calc(77.6px*var(--scale-factor));
 display: inline-block;
 left: -10.8px
 }
 .btn {
 width: calc(48px*var(--scale-factor));
 height: calc(30px*var(--scale-factor));
 margin: 0 auto;
 cursor: pointer;
 display: inline-block;
 border-radius: 50%;
 box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
 border: none;
 background: radial-gradient(circle at 40% 10%, #f0f0f0 0, #dcdcdc 30%, #b0b0b0 60%, #888 100%);
 background-size: cover
 }
 .btn-text {
 position: absolute;
 top: 10px;
 left: 5px;
 visibility:visible !important;
 width: calc(60px*var(--scale-factor));
 height: calc(60px*var(--scale-factor));
 pointer-events: none;
 padding-left: 27px;
 padding-top: 0
 }
 .enter {
 background-size: contain;
 background-repeat: no-repeat;
 width: calc(400px*var(--scale-factor));
 height: calc(45px*var(--scale-factor))
 }
 .jewel {
 background-size: contain;
 background-repeat: no-repeat;
width: calc(298.2px*var(--factor));
 height: calc(317.8px*var(--factor));
 }
 .icons {
 background-color: grey;
 background-size: contain;
 background-repeat: no-repeat;
 width: calc(431.4px*var(--scale-factor));
 height: calc(52.4px*var(--scale-factor))
 }
 .social-bar {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: calc(8px*var(--scale-factor));
 background: #a1a1a1;
 background: linear-gradient(180deg, rgba(161, 161, 161, 1) 0, rgba(235, 235, 235, 1) 50%, rgba(176, 176, 176, 1) 99%, rgba(161, 161, 161, 1) 100%);
 padding: calc(10px*var(--scale-factor)) calc(20px*var(--scale-factor));
 border-radius: calc(30px*var(--scale-factor))
 }
 .player {
 background-size: contain;
 width: calc(400px*var(--scale-factor));
 height: calc(448px*var(--scale-factor));
 background-repeat: no-repeat
 }
 .buttons {
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 gap: calc(15px*var(--scale-factor));
 padding: calc(5px*var(--scale-factor));
 width: calc(385px*var(--scale-factor));
 height: calc(80px*var(--scale-factor));
 pointer-events: auto
 }
 .btn-wrapper {
 position: relative;
 width: calc(66.2px*var(--scale-factor));
 height: calc(77.6px*var(--scale-factor));
 display: inline-block;
 left: -10.8px
 }
 .btn-wrapper a {
 text-decoration: none;
 display: inline-block
 }
 .social-bar {
 width: calc(350px*var(--scale-factor))
 }
 .btn {
 width: calc(48px*var(--scale-factor));
 height: calc(30px*var(--scale-factor));
 margin: 0 auto;
 cursor: pointer;
 display: inline-block;
 border-radius: 50%;
 box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
 border: none;
 background: radial-gradient(circle at 40% 10%, #f0f0f0 0, #dcdcdc 30%, #b0b0b0 60%, #888 100%);
 background-size: cover
 }
 .btn-text {
 position: absolute;
 visibility:visible !important;
top: 10px;
 left: 5px;
 width: calc(60px*var(--scale-factor));
 height: calc(60px*var(--scale-factor));
 pointer-events: none;
 padding-left: 27px;
 padding-top: 0
 }
 .social-svg {
 width: calc(25px*var(--scale-factor));
 height: calc(25px*var(--scale-factor));
 overflow: auto
 }
 .purple {
 position: relative;
 width: calc(48.4px*var(--scale-factor));
 height: calc(22.8px*var(--scale-factor));
 transform: translate(calc(11.4px * var(--scale-factor)), calc(-6.4px * var(--scale-factor)))
 }
 .purple:hover {
 border-top: 3px solid #989ac0;
 border-right: 3px solid #6d71b0;
 border-bottom: 3px solid #6d71b0;
 border-left: 3px solid #989ac0
 }
}
.tiny-footer {
 width: 100%;
 text-align: center;
 padding: 10px 0; /* Adds a little breathing room top/bottom */
 color: #c6ccd4; /* Your requested color */
 font-family: 'Roboto Mono', monospace; /* Matches your site font */
 font-size: 10px; /* Makes it tiny */
 letter-spacing: 0.1em;
 margin-top: 20px; /* Optional: pushes it down slightly */
}
/* Make the H1 tiny and remove default margins */
.tiny-footer h1 {
 font-size: 4px;
 font-weight: normal;
 margin: 0 0 4px 0;
 color: #c6ccd4;
 text-transform: uppercase;
}
/* Make the paragraph tiny */
.tiny-footer p {
 font-size: 4px;
 margin: 0;
 opacity: 0.8; /* Slight transparency for subtle look */
}</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://warehost.net/index.css">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://warehost.net/index.css" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>